如何设置弹性布局

一、设置弹性空间

display: flex | inline-flex。设置后有以下默认属性值

元素排列为一行 (flex-direction 属性的初始值是 row)。
元素从主轴的起始线开始。
元素不会在主维度方向拉伸，但是可以缩小。（没有flex-grow，但是有flex-shrink）
元素被拉伸来填充交叉轴大小。（align-items初始值为stretch）
flex-basis 属性为 auto。
flex-wrap 属性为 nowrap。

<style>
.flexBox{
    display: flex;
    flex-wrap: wrap;
}
</style>

<div class="flexBox">
    <div class="left">1</div>
    <div class="right">2</div>
    <div class="right">3</div>
    <div class="right">4</div>
    <div class="right">5</div>
</div>

二、弹性容器上的属性

flex-direction
flex-wrap
flex-flow（是 flex-direction 和 flex-wrap 属性的复合属性）
justify-content
align-items
align-content
gap
place-content

2.1基本属性 ->>>>

1、flex-direction

设置主轴方向，默认值row

2、flex-wrap

设置一行显示不下时是否换行默认值nowrap

3、flex-flow

你可以将两个属性 flex-direction 和 flex-wrap 组合为简写属性 flex-flow

2.2元素间的对齐和空间分配 ->>>>

4、justify-content

属性用来使元素在主轴方向上对齐，初始值是flex-start

5、align-items

属性可以使元素在当前行的交叉轴方向以什么方式对齐。这个属性的初始值为stretch，这就是为什么flex元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满flex容器 —— 最高的元素定义了容器的高度。

注意：(如果元素没写高度，会被拉伸到容器一样的高度)

6、align-content

各行元素在弹性容器内交叉轴上的对齐方式

注意：

容器的高度比子项的高度高，如果一样高看不出效果
设置flex-wrap: wrap，并且元素有多行，如果只有一行看不出效果，如果不换行，都在一行也无效
默认值stretch

7、gap

属性是用来设置网格行与列之间的间隙（gutters），该属性是row-gap and column-gap的简写形式。为了兼容那些不支持 gap 属性的浏览器要使用 grid-gap

8、place-content

属性是align-content 和 justify-content的简写. 使用这两个属性的值可以用于任何的布局情况。

三、元素上的属性

order
flex （是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性）
flex-grow
flex-shrink
flex-basis
align-self

3.1基本属性 ->>>>

1、order

设置或检索弹性盒模型对象的子元素出现的順序。默认值是0。数字小的靠前

3.2元素间的对齐和空间分配 ->>>>

2、Flex

简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。

3、flex-grow

该元素占据剩余空间的多少。默认值是0 如果我们给上例中的所有元素设定 flex-grow 值为1，容器中的可用空间会被这些元素平分。

例如：如果第一个元素 flex-grow 值为2，其他元素值为1，则第一个元素将占有（2/3的剩余空间+原来自有的宽度）

4、flex-shrink属性

是处理flex元素收缩的问题。默认值是1。（等比例收缩） 如果我们的容器中没有足够排列flex元素的空间，那么可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。如果设置flex-shrink：0 宽度不收缩与min-width效果一致

5、flex-basis

定义了该元素的空间大小（the size of that item in terms of the space）默认值是auto（根据内容撑开的宽度）

（我的理解是：设置在主轴方向上该元素所占的空间大小。如果主轴是横向的，那就是设置默认宽度，如果主轴是纵向的，就是设置默认高度）

6、align-self

定义flex子项单独在弹性容器内交叉轴方向上的对齐方式。默认值auto.

Flex布局的基本用法和注意事项