CSS布局

目录

一、传统布局  float

二、传统布局  display:inline-block 内联块级元素

三、现代布局 display:flex弹性盒子

1、控制弹性盒子模型内子元素的排列方向(flex-direction)

2、设置弹性盒子内子元素是否换行  (flex-wrap)

3、设置弹性盒子内子元素的排列顺序(order)

4、控制弹性盒子内子元素的缩放比例(flex) 

5、控制弹性盒子内子元素的分布方式(justify-content) 

---

一、传统布局  float

向需要横向布局的元素添加float属性（哪个元素要横着，给哪个元素加float属性）

值	left :  左浮动
	right  :  右浮动
存在的问题	使用float后，所在的父级元素无高度，会导致下方元素向上浮动
解决	给父级元素设置高度（不推荐）
	给父级元素设置overflow:hidden;达到父级高度随子级高度自适应的效果（推荐）
无法解决	元素之间均匀分布需要计算，而且不一定能均匀分布
	元素均分父级需要计算，而且不一定能均匀分布
	书写繁琐，代码冗余

 

二、传统布局  display:inline-block 内联块级元素

向需要横向布局的元素添加display:inline-block变为内联块级元素，内联块级元素不独占一行，对宽高支持

存在的问题	使用之后元素之间产生莫名其妙的空隙，对整体的布局有影响
产生的原因	把换行和空格都当成空白
解决办法	把元素标签首尾相连（不推荐）
	文字大小处理，给使用display:inline-block的父级元素设置字体大小为0  font-size:0 并且该元素要有有效的字体大小
无法解决的问题	元素之间均匀分布需要计算，而且不一定能均匀分布
	元素均分父级需要计算，而且不一定能均匀分布
	书写繁琐，代码冗余

三、现代布局 display:flex弹性盒子

让多个元素横向布局，只需要给这些元素的父级元素加上display:flex

1、控制弹性盒子模型内子元素的排列方向(flex-direction)

  flex-direction属性取值如下：

row	横向从左到右
row-reverse	横向从右到左
column	纵向从上到下
column-reverse	纵向从下到上

       

2、设置弹性盒子内子元素是否换行  (flex-wrap)

flex-wrap属性取值如下:

wrap	换行
nowrap	不换行

       

3、设置弹性盒子内子元素的排列顺序(order)

       order作用到子元素身上,属性值为一个整数，值越小，该子元素出现的顺序越靠前

4、控制弹性盒子内子元素的缩放比例(flex) 

flex:复合属性

flex-grow	拉伸因子 (值为整数)
flex-shrink	压缩因子
flex-basis	基准因子

     

5、控制弹性盒子内子元素的分布方式(justify-content) 

justify-content属性取值如下:

flex-start	代表这些元素在排列方向上的开始位置分布
flex-end	代表这些元素在排列方向上的结束位置分布
center	代表这些元素在排列方向上的中间位置分布
space-between	代表空白元素分布在元素的中间
space-around	代表空白元素分布在元素的周围(两个元素之间算两份)
space-evenly	代表空白元素分布在元素周围均匀分布(两个元素之间算一份)

   

6、控制弹性盒子内子元素在垂直方向上的对齐方式(align-items)

align-items属性取值如下:

flex-start	顶部/左端对齐
flex-end	底部/右端对齐
center	垂直方向居中对齐
baseline	以文字底部对齐

       

7、设置弹性盒子内对行元素的分布方式 (align-content )  

align-content 属性取值如下:

flex-start	所有行都靠近顶部/左端
flex-end	所有行都靠近底部/右端
center	所有行在中间位置
space-between	代表空白元素分布在元素的中间
space-around	代表空白元素分布在元素的周围(两个元素之间算两份)
space-evenly	代表空白元素分布在元素周围均匀分布(两个元素之间算一份)