对于前端开发人员来说,网页布局是css的一个重点应用,一个完美的网页布局会给人一种和平舒畅的心情~ but传统的布局方案是基于盒模型,依赖display属性 + position属性 + float属性来进行布局,它对于那些特殊布局非常不方便。直到我学习了css3的flex布局属性,立马就喜欢上了这种简洁、方便、快速的布局方式
Flex布局的介绍
Flex是(Flexible Box 弹性布局)是2009年W3C提出的一种新布局,用来为盒模型提供最大的灵活性,目前已经得到以下浏览器的支持,Flex布局将会成为未来布局的首选方案。
注意事项
1、内核为webkit的浏览器使用Flex布局时,必须加上 **-webkit- **前缀
2、给元素设置了Flex布局以后,它的子元素的float、clear、和vertical-align三个属性将会失效。
使用Flex布局
要使用flex布局,只需在父元素上设置display: flex 属性
.flex-container {
display: -webkit-flex; /* Safari */
display: flex;
}
行内元素使用flex布局,在父元素上设置display: inline-flex属性
.flex-container {
display: inline-flex;
}
容器属性列表
| 属性 | 描述 | 属性值 |
| flex-direction | 决定item的排列方向 | row | row-reverse | column | column-reverse |
| flex-wrap | item排列不下时,如何换行 | nowrap | wrap | wrap-reverse |
| flex-flow | flex-direction和flex-wrap的简写 | row nowrap |
| justify-content | item在主轴上的对齐方式 | flex-start | flex-end | center | space-between | space-around |
| align-items | item在另外一轴上的对齐方式 | flex-start | flex-end | center | baseline | stretch |
| align-content | 多根轴线的对齐方式 | flex-start | flex-end | center | space-between | space-around | stretch |
容器属性相关例子
flex-direction:决定主轴的方向(即项目的排列方向)。有四个属性值
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
flex-wrap:默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
- nowrap(默认):不换行。
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。
flex-flow:是flex-direction属性和flex-wrap属性的简写形式,默认属性值为row nowrap。
- row nowrap:主轴为水平方向,起点在左端,一条轴线排不下也不换行。
justify-content: 定义了项目在主轴上的对齐方式。
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items:定义项目在交叉轴上如何对齐。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content: 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
item属性列表
| 属性 | 描述 | 属性值 |
| order | 定义item的排列顺序 | 整数,默认为0,越小越靠前 |
| flex-grow | 当有多余空间时,item的放大比例 | 默认为0,即有空间也不放大 |
| flex-shrink | 当空间不足时,item的缩小比例 | 默认为1,即空间不足时缩小 |
| flex-basis | 项目在主轴上占据的空间 | 长度值,默认为auto |
| flex | flex-grow,flex-shrink,flex-basis的缩写 | 默认为0 1 auto |
| align-self | 单个item独特的对齐方式 | 同align-items, 可覆盖align-items属性 |
item属性相关例子
order:定义项目的排列顺序。数值越小,排列越靠前,默认为0。
flex-glow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink: 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
flex: 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
align-self: 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
文章每周持续更新,可以微信搜索「 前端大集锦 」第一时间阅读,回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料
网友评论