CSS flex弹性布局

概念

父级元素 设置display:flex; 子元素即按照弹性盒子布局

属性名称	字段	备注
flex-direction	row	默认子元素水平靠左排列
	row-reverse	子元素靠右倒序排列
	column	竖排
	column-reverse	倒序竖排
flex-wrap
	nowrap	默认值，子元素宽度超过父级宽度时不换行;
	wrap	子元素宽度超过父级宽度时换行;
	wrap-reverse	子元素宽度超过父级宽度时换行且倒序排列;

实例

flex-direction 子元素排列方向

• row

  
  row

• row-reverse

  
  row-reverse

• column

  
  column

• column-reverse

  
  column-reverse

flex-wrap 换行

• nowarp

nowarp

• wrap

  
  wrap

• wrap-reverse

wrap-reverse

给定父元素的width 和 height 设置flex-wrap:nowwap 水平方向会压缩子元素width来自适应父元素的width，垂直方向不会压缩父元素height来自适应父元素的height

自适应

justify-content 属性

属性名称	字段	备注
justify-content	flex-start	整体子元素靠左
	flex-end	整体子元素靠右
	center	整体子元素居中
	space-between	第一个子元素靠左顶格，最后一个子元素靠顶格，中间的元素等分间距;
	space-around	第一个子元素靠左的间距和最后一个子元素靠右的间距是中间子元素间距的一半，中间的元素等分间距。

• 父元素给定宽度需要比子元素大，否则看不出效果。

justify-content属性

align-items 属性 控制垂直方向上的位置

属性名称	字段	备注
justify-content	flex-start	整体垂直靠上排列;
	flex-end	整体垂直靠下排列;
	center	整体子元素居中
	baseline:	子元素内的文字底部对齐，如果文字大小不同，会导致子元素水平不对齐;
	stretch:	如果子元素不设置高度，高度被拉伸到和父元素高度相同（除去自身的margin）

align-items 属性

flex-grow 按比例布局（最爱）

• 每个子元素增长的宽度比例是：1 第3个为3 倍

  
  按比例布局

flex-shrink 按比例缩小布局

• 第3个按照 1.5倍缩小方式布局

按比例缩小方式布局

order（排序）按照指定的顺序排列子元素

ul li:nth-child(1){
order:2;
}
ul li:nth-child(2){
order:1;
}
ul li:nth-child(3){
order:4;
}
ul li:nth-child(4){
order:3;
}
ul li:nth-child(5){
order:5;
}

指定子元素排列顺序

align-self 单独设置和“align-items” 不同的垂直对齐方式

ul{
    margin:0;
    padding:0;
    border: 2px solid red;
    width: 300px;
    height: 200px;
    margin: 50px auto 0;
    list-style:none;
    display: flex;
    justify-content: center;
    align-items: flex-start;

}

ul li{
    width: 100px;height: 50px;border: 2px solid yellow;
    text-align:center;
    margin:10px;
    line-height:50px; 
}

ul li:nth-child(2){
    align-self: center; 
    /*单独设置center*/
}

align-self单独设置和“align-items” 不同的垂直对齐方式

盒子模型代码