容器的属性
设置了 flex 属性的容器可以通过设置其他属性值来设置容器的子元素的排列
以下6个属性可以设置在容器上:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1、flex-direction(设置子元素的排列方向)
flex-direction 属性决定子元素的排列方向
.box { flex-direction: row | row-reverse | column | column-reverse;}
<div class="test02"> <div class="children"> <p>1</p> </div> <div class="children"> <p>2</p> </div> <div class="children"> <p>3</p> </div></div>
.test02 { display: flex; flex-direction: row | row-reverse | column | column-reverse; }.test02 .children{ width: 50px; height: 50px; }
row
(默认值):主轴为水平方向,起点在左端;
row-reverse
:主轴为水平方向,起点在右端。
column
:主轴为垂直方向,起点在上沿。
column-reverse
:主轴为垂直方向,起点在下沿。
2、flex-wrap属性(设置是否换行)
让弹性盒的子元素在必要的时候拆行,当不设置该属性值的话默认值是不换行的,如果容器装不下子元素的话子元素会进行相应的收缩。有三个属性值:
.box{ flex-wrap: nowrap | wrap | wrap-reverse;}
nowrap
(默认):不换行。
wrap
:换行,第一行在上方。
wrap-reverse
:换行,第一行在下方。下面分别对应:
3、flex-flow 属性(flex-direction和flex-wrap的结合)
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性,默认值为 row nowrap。当然,该属性也可以只设置其中一个属性值。
.box { flex-flow: <flex-direction> || <flex-wrap>;}
4、justify-content属性(设置子元素在横轴上的排列)
justify-content 属性定义了子元素在横轴上的对齐方式。
.box { justify-content: flex-start | flex-end | center | space-between | space-around;}
flex-start(默认值):左对齐;
flex-end:右对齐;
center: 居中;
space-between:两端对齐,项目之间的间隔都相等;
space-around:每个子元素之间的间隔相等,且子元素之间的间隔比子元素与父元素的距离大一倍。
5、align-items属性(设置子元素在纵轴上的排列)
align-items 属性定义项目在纵轴上是如何排列的
.box { align-items: flex-start | flex-end | center | baseline | stretch;}
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果子元素未设置高度 height 或设为auto,将占满整个容器的高度。如果子元素设置了宽度,则该属性值无效
6、align-content属性(设置每行子元素之间的排列方式)
align-content 属性定义了当有多行子元素时每行子元素之间排列方式,当只有一行子元素时即flex-wrap属性值为no-wrap时,该属性没有效果。
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}
stretch(默认值):每行子元素默认排列,相当于只设置了lex-wrap:wrap,每行子元素间有一定间隔
flex-start:子元素从纵轴的起点开始排列,且行间没有间距
flex-end:与纵轴的终点对齐,且行间没有间距。
center:与纵轴的中点对齐。
space-between:与纵轴两端对齐,轴线之间的间隔平均分布。
space-around:每行子元素的间隔都相等,且每行子元素之间的间隔比子元素到父元素的距离大一倍。
4条评论
2022-04-04 17:28:49 回复TA
2022-04-24 16:40:41 回复TA
2022-04-24 16:41:11 回复TA
2022-04-24 22:26:06 回复TA