CSS弹性盒布局

Flexible Box Layout

一、Flex布局概述

Flex，即Flexible Box, 意为"弹性盒",用于为盒装模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。
块级元素可设置display:flex; 行内元素可设置display:inline-flex。
webkit内核的浏览器(Chrome,Safari)，需加上-webkit前缀,即-webkit-flex,-webkit-inline-flex。
设为flex布局后，元素的float、clear、vertial-align属性将失效。

1. Flex容器和Flex项目:

• Flex容器(flex container): 采用Flex布局的元素。
• Flex项目(flex item): Flex容器的所有子元素。

2. 容器的两根轴及相关位置、尺寸

• 主轴(main axis):容器的水平轴
• 交叉轴(cross axis): 容器的垂直轴
• main start:主轴的开始位置，即与边框的交叉点
• main end:主轴的结束位置
• cross start: 交叉轴的开始位置
• cross end:交叉轴的结束位置
• main size: 单个项目占据的主轴空间尺寸(项目默认沿主轴排列)
• cross size: 单个项目占据的交叉轴空间尺寸

如下图:

二、Flex容器属性

Flex容器有6个属性:

• flex-direction
• flex-wrap
• flex-flow （flex-derection和flex-wrap的简写）
• justify-content
• align-items
• align-content

1. flex-direction

决定主轴的方向。

.container {
    flex-direction: row | row-reverse | column | column-reverse
}

flex-direction属性可能值:

• row（default）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上端。
• column-reverse：主轴为垂直方向，起点在下端。

2. flex-wrap

规定项目在一条轴线上排不下的时候，如何换行。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse
}

flex-wrap属性可能值:

• nowrap(default):不换行
• wrap:换行，第一行在上方
• wrap-reverse:换行，第一行在下方

3. flex-flow (简写属性)

是flex-direction和flex-wrap的简写形式。默认为flex-flow: row nowrap

.container {
    flex-flow: <flex-direction>|<flex-wrap>
}

4. justify-content

定义项目在主轴方向上的对齐方式。

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

其具体对齐方式与主轴的方向有关，默认主轴方向是row,在此情况下:

• flex-start(default):左对齐
• flex-end:右对齐
• center: 居中
• space-between: 两端对齐，项目之间的间隔都相等
• space-around: 每个项目两侧的间隔相等，那么项目之间的间隔是项目与边框的间隔的两倍

如下图所示:

5. align-items

定义项目在交叉轴方向上的对齐方式（项目可能还是沿主轴排列的）。

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

其具体的对齐方式与交叉轴的方向有关。这里假设交叉轴是垂直方向。

• stretch(default):如果项目未设置高度或高度为auto,则将占满整个容器的高度
• flex-start: 上对齐
• flex-end: 下对齐
• center: 垂直居中对齐
• baseline: 项目的第一行文字的baseline(基线)对齐

如下图所示:

6. align-content

定义多行主轴的对齐方式。如果项目只有一行主轴，则该属性不起作用。

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

align-content属性可能值:

• stretch（default）：轴线占满整个交叉轴。
• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

如下图所示:

三、Flex项目属性

flex项目也有6个属性:

• order
• flex-grow
• flex-shrink
• flex-basis
• flex (flex-grow、flex-shrink、flex-basis的简写)
• align-self

1. order

定义项目的排列顺序索引。

.item {
  order: 0|1|2|-1|999
}

order属性可能值:所有interger

• 默认为0。
• 可以为负。
• 数值越小排列越靠前。
• order属性值相等的项目按照书写顺序排列。

如下图所示:

2. flex-grow

定义如果存在剩余空间的时候，项目的放大倍数。

.item { 
  flex-grow: 0|1|2|1.2
}

可能值:number,不能为负。

• 默认为0。即即使存在剩余空间，也不放大。
• 如果所有项目的flex-grow都为1，则它们将等分剩余空间。
• 如果一个项目的flex-grow为2,其他项目的flex-grow都为1，则前者占据的剩余空间是后者的2倍

如下图所示:

3. flex-shrink

定义如果所有项目的默认宽度之和大于容器的时候，项目的缩小比例。

.item {
    flex-shrink: 0|1|2|1.2
}

可能值: number,不能为负。

• 默认为1。即如果空间不足，项目将缩小。
• 如果所有项目的flex-shrink都为1，则当空间不足时它们都将等比例缩小。
• 如果一个项目的flex-shrink为0，其他项目的flex-shrink都为1，则当空间不足时前者不缩小，后者缩小。

4. flex-basis

定义了项目在主轴方向的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。浏览器会根据这个属性，计算主轴是否有多余空间。

.item {
    flex-basis: auto|10em|3px|content|fill|max-content|min-content|fit-content;
}

flex-basis属性可能值:length

• auto(default)：项目的本来大小
• 可以设为和width或height属性一样的值，这样项目将占据固定空间。

5. flex (简写属性)

是flex-grow、flex-shrink、flex-basis的简写形式。后两个属性可选。

可能值:

• 默认为0 1 auto。
• auto: 1 1 auto
• none: 0 0 auto

6. align-self

定义单个项目在交叉轴的对齐方式，它可以覆盖容器元素的align-items属性。即该属性允许单个项目有与其他项目不一样的交叉轴对齐方式。

.item {
    align-self: auto | flex-start| flex-end | center | baseline | stretch ;
}

可能值:

• auto(default)： 即与父元素的align-items一致。如果没有父元素，则等同于stretch
• flex-start| flex-end | center | baseline | stretch: 与align-items属性完全一致。

四、我的实践

.toprecommend-part {
  box-sizing: content-box;
	background-color: #f2e5da;
	padding-top: 8px;
	min-height: 96px;
	@media only screen and (min- 980px){ 
		margin-top:-30px;
	}
	//height: 300px;
	margin-bottom: 30px;
}
.toprecommend-container {
	//position: relative;
	margin:0 auto;
	min- 240px;
	max- 1220px;
	padding: 0 20px;	
}
.toprecommend-title {
	//font-family: MetricWeb, sans-serif;
	font-size: 16px;
	line-height: 20px;
	margin-top: 0px;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid #ccc1b7;
	font-weight: 600;
  //position: relative;
  a {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
}
.toprecommend-list { //flex容器
	margin-top: 8px;
	margin-bottom: 0px;
	display: flex;//容器中的直系子元素都会变为 flex 元素
  flex-wrap: wrap;
  /* 指定flex元素单行显示还是多行显示:
   * nowrap: flex元素被摆放到一行
   * wrap: flex元素被打断到多个行中
   * wrap-reverse: 和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。
  */
	zoom:1;
	clear: both;
	@media (min- 740px) {
	  margin-left: -20px;
	}
}
.toprecommend-item {//flex元素
	display: block;
  flex-basis: 25%;//指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。
  /*
	min- 25%;
	max- 25%;
   25%;
  */
  padding-left: 20px;
  flex: 1 1 0%;
  /** 规定了弹flex元素如何伸长或缩短以适应flex容器中的可用空间。它是一个简写属性，可以同时设置flex-grow, flex-shrink与flex-basis。
  * flex-grow:拉伸因子，为正整数
  * flex-shrink:收缩因子，flex 元素仅在默认宽度之和大于容器的时候才会发生收缩

  */
  -webkit-flex: 1 1 0%;
  -ms-flex: 1 1 0%;
  

  @media (min- 740px) {
    padding-left: 20px;
    -webkit-flex: 0 0 0%; //0,0才是不拉伸也不收缩
    flex-basis: 33.33333%;
  }
  @media (min- 980px) {// M
    flex-basis: 25%;
  }
}
.toprecommend-item-content {
	padding-bottom: 12px;
	display: flex;
	font-size: 14px;
	line-height: 16px;
	position: relative;
	 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
.toprecommend-item-title {
	-webkit-box-flex: 1;
	-webkit-flex: 1 0 0%;
	-ms-flex: 1 0 0%;
	flex: 1 0 0%;
	-webkit-box-ordinal-group: 3;
	-webkit-order: 2;
	-ms-flex-order: 2;
	order: 2;
	a {
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    color: #000;
    &:visited {
      color: #66605c;
    }
    &:hover {
      color: #736c67;
    }
  }
}
.toprecommend-item-image {
   @media (max-1220px) {
    display: none;
  }
   30%;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 4px 10px 0 0;
  img {
   display: block;
  }
  a {
    display: block;
    text-decoration: none;
    cursor: pointer;
  }
}

<div class="toprecommend-part">
    <div class="toprecommend-container">
        <h2 class="toprecommend-title">
            <a class="list-link" href="#">为您推荐</a>
        </h2>
        <ul id="story-recommend-top" class="toprecommend-list">
          <li class="toprecommend-item">
            <div class="toprecommend-item-content">
                <div class="toprecommend-item-title">
                    <a href="/story/001063419?tcode=smartrecommend&amp;ulu-rcmd=undefined">
                        并不风光的中产阶级
                    </a>
                </div>
                <div class="toprecommend-item-image">
                    <a href="/story/001063419?tcode=smartrecommend&amp;ulu-rcmd=undefined">
                        <img src="http://i.ftimg.net/picture/6/000054146_piclink.jpg">
                    </a>
                </div>
            </div>
        </li>
        <li class="toprecommend-item">
            <div class="toprecommend-item-content">
                <div class="toprecommend-item-title">
                    <a href="/story/001062572?tcode=smartrecommend&amp;ulu-rcmd=undefined">
                        新加坡吸引绿地FDI全球居首
                    </a>
                </div>
                <div class="toprecommend-item-image">
                    <a href="/story/001062572?tcode=smartrecommend&amp;ulu-rcmd=undefined">
                        <img src="http://i.ftimg.net/picture/4/000037714_piclink_272_153.jpg">
                    </a>
                </div>
            </div>
        </li>
        <li class="toprecommend-item">
            <div class="toprecommend-item-content">
                <div class="toprecommend-item-title">
                    <a href="/story/001063662?tcode=smartrecommend&amp;ulu-rcmd=undefined">
                        中国经济疲弱对全球影响甚微
                    </a>
                </div>
                <div class="toprecommend-item-image">
                    <a href="/story/001063662?tcode=smartrecommend&amp;ulu-rcmd=undefined">
                        <img src="http://i.ftimg.net/picture/1/000054411_piclink.jpg">
                    </a>
                </div>
            </div>
        </li>
        <li class="toprecommend-item">
            <div class="toprecommend-item-content">
                <div class="toprecommend-item-title">
                    <a href="/story/001060926?tcode=smartrecommend&amp;ulu-rcmd=undefined">
                        “奇怪”的中印增长数据
                    </a>
                </div>
                <div class="toprecommend-item-image">
                    <a href="/story/001060926?tcode=smartrecommend&amp;ulu-rcmd=undefined">
                        <img src="http://i.ftimg.net/picture/5/000050235_piclink.jpg">
                    </a>
                </div>
            </div>
        </li>
      </ul>
    </div>
</div>

参考资料

https://developer.mozilla.org/en-US/docs/Glossary/Flex

https://developer.mozilla.org/en-US/docs/Web/CSS/display

Flex布局教程：语法篇

Flex布局教程：实例篇(内含骰子布局、网格布局、圣杯布局）