flex布局原理:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
下面按照次序依次介绍flex常用的属性:flex-direction,flex-wrap,justify-content,align-items,align-content,flex,align-self
1.flex-direction决定主轴的排列方向:row(默认值)|row-reverse|column|column-reverse,示意图如下:
(1)row(默认值):主轴为水平方向,自左至右
(2)row-reverse:主轴为水平方向,自右至左
(3)column:主轴为垂直方向,自上而下
(4)column-reverse:主轴为垂直方向,自下而上
2.弹性元素永远沿主轴排列,那么如果主轴排不下,通过flex-wrap
决定容器内项目是否可换行
默认是flex-wrap:no-wrap(不换行),当盒子放不下时也不会溢出,而是盒子伸缩
效果:父盒子宽度不够,设置flex-wrap换行显示
3.justify-content属性,定义了项目在主轴上的对齐方式
(1)flex-start(默认值):左对齐
(2)flex-end:右对齐
(3)center:居中
(4)space-between:两端对齐,项目之间的间隔都相等
(5)space-around:两个项目两侧间隔相等
html结构:
css代码:
显示效果:依次是左对齐,右对齐,居中对齐,两端对齐及均匀分布
4.align-items设置侧轴上的子元素排列方式(单行)
html:
css:
效果显示:
5.align-content设置侧轴上的子元素排列方式(多行)
html:
css:
6.flex属性:分配父盒子剩余空间,这个属性是给子盒子设置的,后面的数字代表瓜分剩余空间的份数
7.align-self给单个子盒子自身设置侧轴对齐方式,其他兄弟位置保持不变.