flex 布局

flex 布局原理

全称 flexible box,弹性布局.

如何开启：为元素添加 display: flex.

开启 flex 布局的元素,称为 flex 容器（flex container）,Its child elements become container members,称为 flex 项目.

flex 布局原理：通过给父盒子添加 display: flex,来控制子盒子的位置和排列方式.

flex Layout parent box common properties

flex-direction

设置主轴方向

justify-content

设置主轴子元素排列方式

flex-wrap

设置子元素是否换行

默认不换行,If the child box width sum is greater than the parent box,will shrink！

align-items

设置子元素在侧轴上的排列方式（Child elements are single-line）

align-content

设置子元素在侧轴上的排列方式（Child elements are multiline）

flex-flow

flex-direction 与 flex-wrap Composite notation of properties

son {
    
  flex-flow: row wrap;
}

flex Layout subbox common properties

flex

flex 属性其实是 flex-grow、flex-shrink、flex-basis 三个属性的简写.

flex-grow The property value is a number,Used to set the expansion ratio of the flexbox,That is, the number of shares the box occupies in the remaining space,默认为 0.常见的 flex: 1 是 flex-grow 为 1.

flex-shrink The property value is a number,Used to set the shrink ratio of the box,It shrinks only when the sum of the widths of the child boxes is greater than the parent box.

flex-basis Used to set the initial length of the subbox.

span {
    
  flex: 1;
}

.son {
    
  flex: 0 0 33.33%;
}

align-self

Independently set the arrangement of a subbox on the side axis,它会覆盖 align-items 属性.默认值为 auto,Indicates that it inherits the parent box align-items 属性,The rest of the property values ​​are AND align-items 相同.

order

Define the subbox in主轴上的排列顺序.默认值为 0,值越小越靠前,可以为负数.

.son {
    
  order: -3;
}