.png%3Falt%3Dmedia%26token%3D4d1a8b2a-57ee-476f-940c-8253cbd9a59d)
.png%3Falt%3Dmedia%26token%3D4d1a8b2a-57ee-476f-940c-8253cbd9a59d)
Flex
Flex (CSS Flexbox Layout Module) is a way to design flexible responsive layouts for web pages.
The main concept behind flex is the flex container. If you set a container to
display: flex;, its child items' width or height will be expanded or shrunk to best fill the space available.
display: flex;
The direction the flex items will be stacked in is determined by the
flex-direction property. The options include row, row-reverse, column, and column-reverse.
flex-direction: column;
The alignment of the items in the main-axis (horizontal if
flex-direction is row or row-reverse, vertical if flex-direction is column or column-reverse) is determined by the justify-content property. The options include flex-start, flex-end, space-between, space-around, and center.
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: center;
The alignment of the items in the cross-axis (vertical if
flex-direction is row or row-reverse, horizontal if flex-direction is column or column-reverse) is determined by the align-items property. The options include flex-start, flex-end, stretch, and center.
align-items: flex-end;
align-items: center;
align-items: stretch;
The child items of a flex container have a say in how they are altered. The
flex-grow property on the child of a flex container defines whether the item should be the desired ratio of this item compared to its siblings.
flex-grow ratios 1:0:0
flex-grow ratios 4:1:1
The
flex-shrink property defines how much a flex item will shrink relative to the rest of the flex items. Best used in conjunction with the flex-basis property.The
flex-basis property specifies the initial length of an item on the main-axis.
All items have flex-basis: 400px, and the flex-shrink ratios are 1:0:1
Last modified 2mo ago