In the CSS world, there are a variety of layouts. Today, I’ll take a look at the Flex layout I use the most. Who uses who knows, this also too comfortable 😎

preface

Start by preparing a piece of HTML code that will be used to explain the rest of the code.

<div class="parent">
  <p class="child first">Hello, I'm the first child</p>
  <p class="child second">Hi, I'm the second child</p>
  <p class="child third">Uh-huh. I'm the third child</p>
</div>
Copy the code

We add display: flex; , creating the Flex layout. CSS is as follows:

.parent {
  width: 300px;
  height: 200px;
  border: 1px solid #409eff;
  display: flex;
}

.child {
  width: 50px;
  font-size: 12px;
}
.first {
  background: rosybrown;
}
.second {
  background: #ff6800;
}
.third {
  background: #ff6088;
}
Copy the code

The parent element is called the child element in the Flex container, and the child element is called the Flex child. All properties in a Flex layout are applied to Flex containers or Flex children

introduce

Since Flex’s properties apply to containers or children, I have introduced them in two pieces. Flex layouts are split into main and cross axes, which can be easily understood as horizontal and vertical

Properties that apply to the container

All attributes described under this heading are written in the parent element.parentUnder the

  • justify-content

The justify – content determines the horizontal alignment of flex subitems, property values have center | space – around | space – between | space – evenly | flex – start | flex – end. In the command, “Center” : align in the center

Space-around: Each Flex child has an equal amount of space left and right. So, the left side of the first Flex child and the right side of the last Flex child are only half as far apart as the middle

Space-between: aligns both ends

Space-instituted: Each Flex child item will evenly split the right and left sides. Note the distinction with space-around

Flex-start: left-aligned (default)

Flex-end: right-aligned

  • align-items

Decided the vertically align – items flex item alignment, property values have center | stretch | flex – start | flex – end | baseline. Among them:

Center: vertically centered

Stretch: Stretches the flex subitem (default value). If the child does not specify a height, it is stretched to container height. Otherwise, the specified height is rendered

Flex-start: container top alignment

Flex-end: align the bottom of the container

Baseline: baseline alignment relative to the container

  • flex-direction

Flex – direction determines the overall layout of the flex subitems direction and attribute values are: row | row – reverse | column | column – reverse. Where: Row: rows are arranged (default) from left to right

Row-reverse: Rows are arranged from right to left

Column: vertically arranged from top to bottom

Column-reverse: columns are arranged vertically from bottom to top

  • flex-wrap

Flex – wrap decided the flex items as a whole is a single display or a newline attribute values are: nowrap | wrap | wrap – reverse. Where: nowRAP: single line display (default), so prone to width overflow

Wrap: line feed display

Wrap-reverse: Displays a newline, with the newline element displayed on top

  • flex-flow

Flex-flow is short for flex-direction and flex-wrap. The format is as follows: flex-flow: row wrap;

  • align-content

The align-content and context-content attributes are similar. Justify -content specifies horizontal alignment of Flex children, while align-content specifies vertical alignment of Flex children. Property values are the same as justify-content values, which are not covered here. Tips: This property has no effect if the Flex child has only one row

Properties that act on children

All attributes described under this heading are written under a specific child element. I write the attributes in the third child element.thirdon

  • flex-grow

Flex-grow: Extends the width occupied by flex children. What does that mean? When this attribute is set for a child item, the value of this attribute is used to occupy the remaining space excluding the element. The property value is a number between 0 and 1. Let’s start by looking at ** which has only one child (third child)** When this property is set, where: 0: does not occupy free space (default)

0.5: Takes up half of the remaining space

1: Occupy all remaining space. Tips: Values greater than 1 have the same effect as 1

When this property is set for multiple subitems at the same time, the remaining space is allocated proportionally. In this scenario, I set flex-grow to 0.25 for the first and second child elements, which means that the first and second child elements split 50% of the remaining space. Still changes the third child’s flex-grow. Where: 0: the remaining 50% of the remaining space, the other 50% is divided by the first and second child elements

0.25: The three child elements divide 75% of the remaining space. I have 25% left

0.5: remaining 0% of the remaining space: the third child occupies 50% of the remaining space, and the other 50% is divided between the first and second children

1: effect is the same as 0.5

  • flex-shrink

Whereas flex-grow is a child element that expands to make use of remaining space, flex-shrink is a child element that shrinks in width when space is insufficient. We make a simple change to the.child element style (pasted in the style code above), changing width: 50px to width: 120px. Let’s first see if ** changes this property on only one child (the third child)**, where:

1: the default, child elements are shrinkable. All three of the children shrink equally

0: The child element is non-shrinkable, keeping its original width. So, the third child stays the same width (120px), and the first and second children shrink equally (default: 1)

2: The contraction ratio of the three child elements is 1:1:2

Of course, it is also possible to modify flex-shrink for all three child elements at the same time. Here, I will only show you what happens when you set the three child elements to Flex-shrink: 0 at the same time. Otherwise, you can type your own code to see if 🧐 is the case

When all three child elements are set to non-shrink at the same time, it is obvious that the parent element container…… has been exceeded

  • order

Order can change the position of a child item. | | 0 1 attribute values are: – 1. To get a sense of what’s going on, the demonstration of this property applies to the second child (.second) where:

0: default value

-1: a subitem can be displayed first

1: a subitem can be displayed at the end

  • flex-basis

Flex-basis determines the default size of the element before space is allocated. When both width and flex-basis appear on a child element, flex-basis is preferred. Now we change the width of the.child from 120px back to 50px. Attribute values are: auto | px among them:

Auto: default value. If the child element has width, it occupies that width; otherwise, it depends on the content

You can also set a specific PX. I set the third child’s flex-basis to 100px and 250px to demonstrate:

100px

250px. When set to 250px, since the first and second child elements are 50px wide, the remaining space is only 200px(the parent element is 300px wide), not 250px, and the first and second child elements shrink

  • flex

Flex is the short form of flex-grow, flex-shrink, and flex-basis (the flex-shrink and flex-basis parameters can be omitted). The format is as follows: Flex-flow: 0 1 auto;

  • align-self

Align-self can independently control the vertical alignment of a child item. Remember the align-items we introduced earlier? Yes, align-items controls the vertical alignment of all children. Align-self has the same property value as the align-items property value, which I won’t repeat here 🤯. The only difference is that align-self has an auto(the default value), which means that the property value of align-items is inherited

conclusion

Note: In Flex layout, the float, clear, and vertical-align attributes of child elements are invalidated

The Flex layout properties and considerations are covered at 👏 there is still a lot to learn! But through practice, I believe we can handle these attributes and become a better worker 😏