一:flex布局概述
-
作用
- 更加灵活、精确的布局块级盒子,避免了浮动布局中脱离标准流的现象;
-
构成
- 只要启动了弹性布局:
- 父元素变为:弹性容器、子元素为:弹性盒子、x轴水平方向为:主轴、y轴垂直方向为:侧轴(默认)
二:如何使用flex布局
-
如何启动flex布局
- 给父级盒子(弹性容器)添加display:flex,子元素自动挤压或拉伸,具有行内块元素的特性,使得弹性盒子在主轴上排列显示;
- flex布局组成:父级盒子变成弹性容器,子级元素变成弹性盒子;主轴正方向向右默认为x轴,侧轴正方向向下默认为y轴;
-
主轴对其方式
justify-content:center居中 justify-content:space-around给子级两侧添加间距 justify-content:space-between子级之间添加间距 justify-content:space-evenly子级之间、子级与弹性容器之间的间距相等
- 推荐试一下,下面代码看效果
-
侧轴对齐方式
- 子元素有高度情况下默认为align-items:flex-start
- 子元素没有高度的情况下默认为:align-items:stretch,沿侧轴线铺满整个盒子高度
- 其他属性:align-items:flex-end/center
- 单独控制侧轴某元素的排列方式:align-self:属性值与align-items属性值相同
-
flex属性
- 语法:flex:flex-grow flex-shrink flex-basis
- flex:flex-grow(取值正整数),占用弹性容器主轴方向剩余部分的百分比
-
如何改变主轴方向
- flex-direction:row(默认)/column(主轴方向变成垂直,侧轴方向变成水平)
-
弹性盒子在弹性容器内换行问题
- 默认情况下,弹性容器为flex-wrap:no-wrap;表现的效果为,弹性盒子改变了width挤压在弹性容器的第一行
- 利用flex-wrap:wrap,可以实现保证弹性盒子在大小不变情况下,排满弹性容器一行后,实现自动换行的效果;
- 调节不同行的排列方式align-content
- 属性值除了没有align-content:space-evenly,其余属性值与justify-content相同