Yan Dong: Coder & Game Player. Love fitness, love freedom, self-discipline to (2 voice) freedom.

background

I’ve been writing a lot of CSS in flex layouts lately. Flex layouts have very limited properties, including flex-direction, context-content, and align-items. If the picture is squeezed, use flex-shrink: 0; To prevent the image from being squeezed.

Just as I listen to music and beat preception-content: space-between; Jerry: Can’t you just use some of the other flex properties you haven’t used yet? Tom: It’s not like it doesn’t work! How happy is a shuttle! Jerry: You can’t make a silk purse out of a sow’s ear! Tom: A dead wood can burn! Jerry: …

Tom: What do you think Jerry said? Tom: There are many ways to write it down.

Align -content of the Flex container property

Flex container properties, project properties are not described here, there are a lot of very clear articles on the web, recommendedRuan Yifeng – Flex layoutTom read Ruan’s article and got confused when he saw the align-content. What do you mean? I’ve drawn it, butWithout practice, it's like watching a fitness video and thinking you can lose weight!

So Tom started learning align-content.

Teacher Ruan said,”align-contentProperty defines the alignment of multiple axes. This property does not work if the project has only one axis.

Tom pondered that flex layouts have spindles and cross axes, which are the default two axes in Flex layouts. So how do you define multiple axes? After repeated practice, Tom finally found the rule, originally need to display the definition of layout direction, such as:

<div class="flex-container">
  <div class="flex-item flex-item-1">1</div>
  <div class="flex-item flex-item-1">1</div>
  <div class="flex-item flex-item-2">2</div>
  <div class="flex-item flex-item-2">2</div>
  <div class="flex-item flex-item-3">3</div>
  <div class="flex-item flex-item-3">3</div>
  <div class="flex-item flex-item-4">4</div>
  <div class="flex-item flex-item-4">4</div>
  <div class="flex-item flex-item-5">5</div>
  <div class="flex-item flex-item-5">5</div>
</div>
Copy the code

Flex direction: row;

.flex-container {
  height: 400px;
  display: flex;
  flex-flow: row wrap; /* A direction must be defined to form multiple axes */
  align-content: flex-end;/* Change the value of align-content to experience different effects */
  background: gray;
}
.flex-item {
  white-space: nowrap;
  margin-right: 10px;
  margin-bottom: 10px;
  text-align: end;
}
.flex-item-1..flex-item-3 {
  width: 60px;
  height: 80px;
  background: lightcoral;
}
.flex-item-2..flex-item-4 {
  width: 90px;
  height: 40px;
  background: lightblue;
}
.flex-item-5 {
  width: 105px;
  height: 20px;
  background: lightgreen;
}
Copy the code

The align – content: flex – start effect

The align – content: flex – end effect

The align – content: center effect

The align – content: space – around the effect

The align – content: space – between effect

The align – content: stretch effect

Tom: WTF? ! “Stretch” is used to fill up the container. Professor Ruan: Why is that so funny? ! There’s nothing else in the documentation! Tom: “If the item is not set to the height or set to Auto, it will occupy the height of the whole container.” Tom: The “stretch” attribute of the align-content property should be the same as here. Tom goes back and looks at the CSS of each project and finds that each project has a height set. Remove these heights or change them to Auto and try:

Align-content: stretch effect when subitem height is changed to Auto

Tom: I see! Only the height of item-1 and item-3 was changed to auto, and it was found that they got extended stretch, while the other sub-items with no modified height were still not extended. Tom finally figured it out!!

Tom: This is the horizontal layout direction. What is the vertical performance? Have a look, too.

Vertical cross axis: Defines the layout direction of the containerflex-direction: column;

The align – content: flex – start effect

The align – content: flex – end effect

Note When the layout direction is set to Column, the align-content is displayed in the horizontal direction. If it’s center, it’s horizontally centered, right? Try!!!!!

The align – content: center effect

The align – content: space – around the effect

The align – content: space – between effect

The align – content: stretch effect

conclusion

After some real combat, Tom can calculate to find the rule. For the container property align-content to work, the layout direction must be set explicitly

  • If the layout direction is horizontal spindle: flex-direction: row;

    • 1. At this time, the align-content change is reflected in the vertical direction
    • Align-content: stretch; In effect, the height of the subitem should be removed or set to Auto

  • If the layout direction is vertical cross axis: flex-direction: column;

    • 1. At this time, the change of align-content is reflected in the horizontal direction
    • Align-content: stretch; In effect, you should either remove the width of the child or set the width of the child to Auto

Tom saw Jerry this timeTom: Hey! Jerry, I’ve learned a new property of flex, align-content, you can look it up in my blog.Jerry: oh, I see! that’s awesome! keep it on, find more intereting properties of flex. Tom: Good idea! I’ll do it next time! thank you! Jerry: My pleasure!