flex"弹性布局"。指定容器 display: flex 即可。
目录
2、justify-content 和align-items
一、容器属性
- flex-direction属性决定主轴的方向；
- justify-content 属性定义了项目在主轴上的对齐方式。
- align-items 属性定义项目在交叉轴上如何对齐。
- flex-wrap 属性定义，如果一条轴线排不下，如何换行；
- flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap
- align-content定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作 用。
1、flex-direction
- 属性决定主轴的方向；
- flex-direction: column------ column是主轴 row是交叉轴
- flex-direction: row ----- row是主轴 column是交叉轴
/* flex-direction- 定义flex items的排序方向 ，预设值是row*/
flex-direction:row; // row横向排列
flex-direction: row-reverse;// row横向倒排
flex-direction: column; //cplumn纵向排列
flex-direction: column-reverse; //flex-direction:纵向倒排
2、justify-content 和align-items
- justify-content 属性定义了项目在主轴上的对齐方式。
- align-items 属性定义项目在交叉轴上如何对齐。
主要取决于：flex-direction:row;
.flex-container{
height:200px;
display: flex;
flex-direction:row;
//justify-content: flex-end;主轴结束方向对齐
// justify-content: flex-start;主轴起始方向对齐
justify-content: center;//主轴居中对齐
align-items: center;//交叉轴居中
//align-items: flex-end;交叉轴结束方向对齐
// align-items: flex-start;交叉轴起始方向对齐
}
3、flex-wrap
- 如果一条轴线排不下，如何换行；
flex-wrap: nowrap; 只有一行，不分行
flex-wrap: wrap-reverse;分行倒排
flex-wrap: wrap-;分行通过改变 justify-conten和align-items的值调整排列版式
.flex-container{
height:200px;
display: flex;
background-color: bisque;
flex-direction:row;
justify-content: flex-start;
align-items: flex-start;
// flex-wrap: nowrap; 只有一行，不分行
//flex-wrap: wrap-reverse;分行倒排
flex-wrap: wrap;//分行
}
.box{
height: 20px;
width: 200px;
background-color: rgb(87, 170, 193);
}
<body>
<div class="flex-container" >
<div class="A box">A</div>
<div class="B box">B</div>
<div class="C box">C</div>
<div class="A box">A</div>
<div class="B box">B</div>
<div class="C box">C</div>
<div class="A box">A</div>
<div class="B box">B</div>
<div class="C box">C</div>
</div>
</body>
4、flex-flow
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap；
flex-flow: row nowrap;==flex-direction:row;
flex-wrap: nowrap;5、align-content
- align-content定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
stretch 默认值。行拉伸以占据剩余空间。
center 朝着弹性容器的中央对行打包。
flex-start 朝着弹性容器的开头对行打包。
flex-end 朝着弹性容器的结尾对行打包。
space-between 行均匀分布在弹性容器中。
space-around 行均匀分布在弹性容器中，两端各占一半。
二、Flex Item （子元素）
- order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。可随意改变他们的位置。
- align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items和flex container 属性。 默认值为 auto，表示继承父元素的 align-items 属性。如果没有父元素，则等同于 stretch。
- flex-basis 属性定义了在分配多余空间之前，项目占主轴方向的大小，设定之后原来的会失效。
- flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大
- flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。改为0就不会被缩小。和flex-grow相反。
- flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。
1、order
- 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。可随意改变他们的位置。
2、align-self
- 允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items和flex container 属性。 默认值为 auto，表示继承父元素的 align-items 属性。如果没有父元素，则等同于 stretch。
3、flex-basis
- 定义了在分配多余空间之前，项目占主轴方向的大小，设定之后原来的会失效。
取决于flex-direction的设定
4、flex-grow
- 定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
5、flex-shrink
- 定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。改为0就不会被缩小。和flex-grow相反。
6、flex
- 是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。
/* flex container没有空间时同步缩小，有空间时同步扩大，每个item的宽度默认 */
flex: 1 1 auto;
/* 每个item的宽度最多是150，，不会因空间大而扩大 ，会因为空间不足缩小*/
flex: 0 1 150px;
2125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
