[CSS]Flex 布局
主轴和纵轴
对某一盒子模型添加
display: flex;属性后,称之为 Flexible Box 模型(或称之为 flexbox),即弹性盒子模型,简称弹性盒子。
弹性盒子为子元素提供了强大的空间分布和对齐能力。弹性盒子拥有两根轴线,分别为主轴和交叉轴(纵轴)。主轴是沿着弹性盒子的头到尾的轴线,交叉轴是垂直于主轴的轴线。
容器属性
容器属性是只作用于弹性盒子的属性,对其子元素无效。
flex-direction
flex-direction 可以改变弹性盒子的子元素的排列方式。默认子元素都以主轴的开始位置进行排列。
flex-direction 的值为 column 时,即弹性盒子的子元素都以交叉轴的开始位置进行排列。
flex-wrap
弹性盒子的子元素超过可承受的最大宽度时,子元素的宽度将被缩小。
flex-wrap 默不换行,若希望子元素随着弹性盒子宽度的变化而自动换行,可以将属性的值设置为 wrap。
flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的简写,接受的值分别对应 flex-direction 、 flex-wrap。
<div class="demo"> <div class="item"></div> <div class="item"></div> </div> <style> .demo { width: 150px; display: flex; flex-flow: row wrap; } .item { width: 80px; height: 50px; background-color: red; } </style>
两个子元素的总宽度为 160px,大于弹性盒子的总宽度 150px。由于弹性盒子的容器属性 flex-flow 为 wrap,所以,弹性盒子的子元素换行排列。
元素属性
元素属性是只作用于弹性盒子的子元素,对弹性盒子无效。
flex-grow
flex-grow 指的是让弹性盒子的某一个子元素可以分配到剩余空间的系数。
<div class="demo"> <div class="item-1 item"></div> <div class="item-2 item"></div> </div> <style> .demo { height: 50px; display: flex; } .item-1 { flex-grow: 1; background-color: red; } .item-2 { flex-grow: 2; background-color: rgb(4, 123, 221); } </style>
div.item-2 的属性 flex-grow 的值为 2,如图所示,红色部分分配的空间会比蓝色分配得多一些。
flex-basis
flex-basis 指的是让弹性盒子的某一个子元素沿着主轴方向的固定宽度。默认根据子元素的内容来分配固定宽度。
<div class="demo"> <div class="item-1 item">Hello World!</div> <div class="item-2 item">Hello CSS!</div> </div> <style> .demo { display: flex; } .item-1 { flex-basis: 200px; background-color: red; } /* 设置flex-basis为200px */ .item-2 { background-color: rgb(4, 123, 221); } </style>
div.item-1 的 flex-basis 指定为 200px,不同于 div.item-2 由内容来分配宽度。
flex-shrink
当弹性盒子在进行伸缩操作时,其所有子元素会根据浏览器的大小,等比例地缩小宽度。其中一个子元素拥有 flex-shrink 属性时,在伸缩过程中,值越大,被忽略的优先度越高。
<div class="demo"> <div class="item-1 item"></div> <div class="item-2 item"></div> <div class="item-3 item"></div> </div> <style> .demo { height: 50px; display: flex; } .item-1 { flex-shrink: 1; width: 50px; background-color: red; } .item-2 { flex-shrink: 2; width: 100px; background-color: rgb(4, 123, 221); } .item-3 { flex-shrink: 3; width: 150px; background-color: rgb(22, 236, 226); } </style>
item-1 的 flex-shirnk 值为1,item-2 和 item-3 依此为基础递增。在发生伸缩时,弹性盒子的子元素伸缩的规则结果为,flex-shrink 的值越大,也就是权重越高,元素就越先被忽略。
flex
flex 是 flex-grow、flex-shrink、flex-basis的简写。flex 只有一个值时,相当于 flex-grow,有两个值时,相当于 flex-shrink,以此类推。
作用于交叉轴
以下属性可以改变弹性盒子的子元素在交叉轴上的排列位置。
align-self
弹性盒子的子元素高度不一致时,默认所有子元素都排在弹性盒子的最顶端,即交叉轴的开始位置。
align-self 属性只作用于子元素,它可以改变子元素在弹性盒子交叉轴的上、中、下的排列位置。可以接受 stretch、center、start、end 四个值。
<div class="demo"> <div class="item-1 item"></div> <div class="item-2 item"></div> </div> <style> .demo { height: 50px; display: flex; } /* align-self为center */ .item-1 { align-self: center; width: 50px; height: 30px; background-color: red; } .item-2 { width: 100px; background-color: rgb(4, 123, 221); } </style>
在不设置 align-self 为 center 时,默认 div.item-1 元素沿着弹性盒子交叉轴轴最顶端排列。
设置 align-self 为 center 之后,div.item-1 元素沿着弹性盒子交叉轴中心位置排列。
align-items
align-items 的作用于 align-self 相同,区别是,align-items 只作用于弹性盒子,而不作用于子元素。
<div class="demo"> <div class="item-1 item"></div> <div class="item-2 item"></div> </div> <style> /* align-items设置在弹性盒子上 */ .demo { height: 50px; display: flex; align-items: center; } .item-1 { width: 50px; height: 30px; background-color: red; } .item-2 { width: 100px; height: 40px; background-color: rgb(4, 123, 221); } </style>
若子元素没有高度(或高度为 0),设置 align-items(或 align-self 设置在子元素上)在弹性盒子上,子元素将会消失。
align-content
当弹性盒子的高度还有剩余空间,且容器可以换行。默认所有的子元素都以交叉轴排列,下一排有一些空隙。
align-centent 可以改变弹性盒子内子元素如何分配交叉轴剩余的空间。可以接受 stretch、center、flex-end、flex-start、space-between、space-around 等。
如,将 align-content 设置为 flex-start,所有的子元素都紧凑在纵轴的开始位置。
作用于主轴
除了上边的几个让弹性盒子的子元素在交叉轴对齐方式的属性以外,还可以让子元素在主轴的对其方式的属性。
justify-content
justify-content 用来使子元素在主轴方向上对齐,初始值为 flex-start,即所有的子元素从弹性盒子的起始位置开始排列。
通过改变 justify-content 的属性来改变对其方式,接受 stretch、flex-start、flex-end、center、space-around、space-between 六种值。
center 使弹性盒子的子元素集中向主轴的中心排列。
space-between 使弹性盒子的两端子元素在主轴方向上向两端散开,其余子元素平均分配剩余空间。
space-around 使弹性盒的子元素平均地分布在主轴上,两端保留子元素与子元素之间间距大小的一半。
- css 布局 flex
- CSS学习笔记 —— flex 弹性盒子布局
- css的flex布局实现响应式九宫格
- Flex 布局教程:语法篇 作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display 属性 + po
- CSS圣杯布局、双飞翼布局、flex布局的学习
- css flex布局基础
- CSS中的Flex布局
- css flex布局实用
- css flexbox弹性盒子布局
- 基于flex弹性布局实现“头尾固定,中间滚动”的页面(纯CSS实现)
- css布局 - flex布局
- 【CSS复习】Flex布局
- CSS中的flex布局
- CSS布局(圣杯、双飞翼、flex)
- cssflex布局常用属性学习
- CSS网页布局之传统解决方案与Flex大法
- 用flex实现css经典布局------圣杯布局
- 再说流性布局 display:flex ,以及看到的其他一些css 细节
- css实现Flex布局
- 基于flex弹性布局实现“头尾固定,中间滚动”的页面(纯CSS实现)