This is the 9th day of my participation in the August Wen Challenge.More challenges in August

Flex layout

Using Flex layouts, inline lines and blocks are sized

Layout Principle Flexible layout

Any container can be specified as a Flex layout

When the parent element is set to flex layout, float/clear/vertical-align of the child element is invalidated

An element with a Flex layout is called a Flex container, or container for short, and all of its children are automatically called container members and flex items.

Child containers can be arranged horizontally (the default) or vertically

Common concept

Main axis and side axis, x and Y rows and columns, main axis side axis is variable, flex-Drection sets who is the main axis and the rest is the side axis, the child elements are aligned with the main axis

Flex layout parent common properties

flex-drection

Flex-drection sets the orientation of the main axis, which in effect controls the arrangement of child elements, and the other is the side axis

  • Row defaults to left to right
  • Row-reverse goes from right to left
  • Column goes from top to bottom
  • Colunm-reverse from bottom to top
justify-content

To set the arrangement of child elements on the main axis, you must first determine which main axis is x, and vice versa ify is the main axis

  • Flex-start starts at the head by default, left to right if the main axis is X
  • Flex-ends are arranged from the end
  • Center is aligned in the center of the spindle, if the spindle is horizontally centered on the X-axis side
  • Space-around divides the remaining space so that each box is roughly in the middle of its own space
  • Space-between first edges the two sides and then divides the remaining space equally
flex-wrap

What if I set the child element to newline, for example, if one row does not fit

The default Flex layout will automatically reduce the size of the child element even if the parent element does not fit the child element normally. Because the default is to put it on one line, no line breaks

Default no-wrap does not wrap a line

Wrap a newline

align-items

Align-items sets the alignment of children on the side axis (single row). How to center the children horizontally and vertically is to center the main axis and justify the side axis, flex-start,flex-end,center, and justify justify the content. It’s just for the side axis.

  • flex-start

  • flex-end

  • center

  • Remember to stretch the height of the child element

align-content

Align-content sets the arrangement of child elements on the side axis (newline, multiple lines)

  • flex-start
  • flex-end
  • center
  • space-around
  • space-between
  • Stretch, remember to cancel the height of the child element
flex-flow

Flex-flow compound property, equivalent to setting flex-direction and flex-wrap at the same time

  • flex-flow:column wrap;
  • flex-direction:column;
  • flex-wrap:wrap;

Common properties of Flex layout subitems

flex:;

Define the number of shares occupied by subitems in the allocation of remaining space. The larger the value is, the larger the cake allocated will be

align-self

Moving a single item on the side axis can make a single item’s side axis look different from someone else’s

order

Order defines the order of subitems, the smaller the value, the higher the value, the default is 0

Implement the Holy Grail layout in Flex

CSS

/* clear basic style */ * {margin: 0; padding: 0; } body, html { height: 100%; } section { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .child1 { height: 100px; background-color: blueviolet; } .child2 { flex: 1; display: flex; background-color: #0dc3c3; } .child21 { width: 100px; background-color: lightgreen; } .child22 { flex: 1; background-color: skyblue; } .child23 { width: 100px; background-color: lightgreen; } .child3 { height: 100px; background-color: #007fff; }Copy the code

HTML

<section>
  <div></div>
  <div></div>
  <div></div>
</section>
Copy the code

Set the Flex layout for the parent element, section, so that the element naturally becomes a Flex block. Give the section a height of 900px,

Then set the parent element to Flex-direction: column; Div1,div2, and div3 correspond to the middle and bottom of the head respectively. Flex :1: the height of the parent element is equal to the height of the parent element section – the sum of the height of div1 and div3.

Display :flex; The spindle is the default left to right, div21, DIV22, DIV23, DIV21 and DIV23 set to a fixed width,div22 set flex:1 to fill the middle, this is the typical Holy Grail layout.