Flex布局父项常见属性
阅读 (325)一、Flex布局父项常见属性介绍
- flex-direction:设置主轴的方向
- justify-content:设置主轴上的子元素排列方式
- flex-wrap:设置子元素是否换行
- align-content:设置侧轴上的子元素的排列方式(多行)
- align-items:设置侧轴上的子元素排列方式(单行)
- flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap
二、Flex布局父项常见属性详解
2.1、flex-direction
-
说明
设置主轴的方向(即项目的排列方向)。
在 flex 布局中,是分为主轴和侧轴两个方向,同样的叫法有 : 行和列、x 轴和y 轴
默认主轴方向就是 x 轴方向,水平向右
默认侧轴方向就是 y 轴方向,水平向下
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
有4个取值:
-
注意
主轴和侧轴是会变化的,就看 flex-direction 设置谁为主轴,剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
2.2、flex-wrap
-
说明
设置是否换行
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,flex布局中默认是不换行的。
-
举例
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
-
可能取值
-
nowrap(默认):不换行
如果显示不开,会缩小子元素的宽度,放到父元素里面
-
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。
2.3、flex-flow
-
说明
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box { flex-flow: <flex-direction> || <flex-wrap>; <!-- flex-flow:row wrap; --> }
2.4、justify-content
-
说明
设置主轴上的子元素排列方式
-
语法
.box { justify-content: flex-start | flex-end | center | space-between | space-around; }
- 效果
- 可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
2.5、align-items
-
说明
设置侧轴上的子元素排列方式(单行 )
该属性是控制子项在侧轴(默认是y轴)上的排列方式 在子项为单项(单行)的时候使用。
-
举例
.box { align-items: flex-start | flex-end | center | baseline | stretch; }
-
取值
flex-start 从头部开始
flex-end 从尾部开始
center 居中显示
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
2.6、align-content
-
说明
设置侧轴上的子元素的排列方式(多行)
设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况(多行),在单行下是没有效果的。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
-
该属性可能取6个值。
flex-start:与交叉轴(侧轴)的起点对齐。
flex-end:与交叉轴(侧轴)的终点对齐。
center:与交叉轴(侧轴)的中点对齐。
space-between:与交叉轴(侧轴)两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch:轴线占满整个交叉轴。
-
效果
2.7、align-content 和align-items区别
- align-items 适用于单行情况下, 只有上对齐、下对齐、居中和 拉伸
- align-content适应于换行(多行)的情况下(单行情况下无效), 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
- 总结就是单行找align-items 多行找 align-content