伸缩盒布局

伸缩盒布局

伸缩盒布局解决的问题与浮动布局类似，都是让⼦元素在容器中并列显示 。
是一种浏览器提倡的布局模型，避免了浮动脱标。
CSS3伸缩盒（ 弹性盒）（ Flexible Box 或 flexbox），是⼀种当⻚⾯需要适应不同的屏幕⼤⼩以及设 备类型时确保元素拥有恰当的⾏为的布局⽅式。

	<div class=container>
		<div> </div>
		<div> </div>
		<div> </div>
	</div>
	
	<ul class=container>
		<li> </li>
		<li> </li>
		<li> </li>
	</ul>

1. 概念

1）伸缩盒容器：添加display：flex；属性后，容器就为flex容器 （div.container , ul.container）
2）伸缩盒元素：felx容器内的元素就是flex元素（div , li）
3）主轴：默认主轴为x轴，在伸缩盒中伸缩盒元素沿主轴方向进行排列
4）交叉轴：与主轴垂直的轴
5）剩余空间：假设在 1 个 500px 的容器中，我们有 3 个 100px 宽的元素，那么这 3 个元素需要占 300px 的宽，剩下 200px 的可⽤空间。在默认情况下， flexbox 的⾏为会把这 200px 的空间 留在最后⼀个元素的后⾯。

2. 规则

1）伸缩盒容器规则

• dispaly:flex; （给父元素添加）
  强制让他的子元素沿着主轴方向显示，并且子元素不会脱离默认文档流；交叉轴上元素的高度如果没有指定，应该与父元素的高度一致。

• flex-direction:row;
  定义主轴的方向，
  row 主轴方向为x轴，
  column 主轴方向为y轴

• flex-wrap:nowrap;
  当子元素的长度加起来超过主轴上的父元素的宽度，
  wrap ⼦元素换⾏显示
  nowrap（默认值）不换行，子元素将会缩⼩以适应容器

• align-items:strech;
  定义伸缩盒容器中的子元素在交叉轴上的排列方式
  flex-start 在伸缩盒⼦容器的伸缩开始位置显示，即伸缩盒⼦容器顶部
  flex-end 在伸缩盒⼦容器的伸缩结束位置显示，即伸缩盒⼦容器底部
  stretch （默认值）将盒⼦在交叉轴上进⾏拉伸，直⾄适应整个伸缩盒⼦容器（子元素没有设置高度时）
  center 盒⼦在交叉轴中⼼显示
  baseline 第一行文字的基线对齐

• justify-content:space-around;
  定义伸缩盒容器中的子元素在主轴上的排列方式
  flex-start （默认值）在主轴的开始显示
  flex-end 在主轴的结束显示
  space-around 填充空⽩⾃适应在主轴中⼼显示 ，每个元素之间的左右外边距相等，中间的间距是左右两边间距的二倍
  center 在主轴的中⼼显示 ，空白分布在两边
  space-between 填充空⽩⾃适应在主轴中⼼显示，但是⾸尾两个元素距离容器没有空⽩
  space-evenly 每个元素之间和两边元素与容器的间隔都相等
  要先确定主轴方向，再选择对象的属性实现主轴或侧轴的对齐方式

使子元素垂直居中显示：

 display：flex；
 justify-content：center；
 align-items：center;

当给子元素设置宽度，但是有多个伸缩盒元素且元素宽度之和大于伸缩盒容器的宽度时，子盒子的宽度会自动缩减至伸缩盒元素全部置于伸缩盒容器内

2）伸缩盒元素规则

• flex-basic主轴上的基本长度（基本工资）
  为未分配剩余空间时伸缩盒元素在主轴上的空间⼤⼩，flex容器⾥除了元素所占的空间以外的富余空间就是 可⽤空间 available space
  auto 默认值，若未给子元素指定大小，若没有则默认为auto

• flex-grow：主轴上剩余空间分配的份数（分红），默认为0，即有剩余空间时该元素不扩大
  若被赋值为⼀个正整数， flex 元素会以 flex-basis 为基础，沿主轴⽅向增⻓尺 ⼨,使该元素延展占据此⽅向轴上的可⽤空间（available space）

• flex-shrink：主轴上亏损空间（子元素的内容大于父元素的大小）的分摊份数（亏损），默认为1，空间不足时，元素都等比例缩小
  设置为正整数来缩⼩它所占空间到flex-basis以下

• flex 简写形式
  flex: flex-grow，flex-shrink，flex-basis ;

• order 属性定义伸缩盒元素的排列顺序。
  数值越小，排列越靠前，默认为0。

• align-self: 单独设置某个弹性盒子的侧轴对齐方式

  当设置弹性盒子的侧轴对齐方式后，父元素上设置的侧轴拉伸效果对该弹性没有效果，没有设置高度时，该弹性盒子的高度为内容高度

  若伸缩盒元素没有给宽高，则高度会拉伸至盒子高度（单独设置侧轴对齐方式的除外），宽度为内容宽度