CSS---flex篇

CSS3常用布局方式：弹性盒子flex篇

1，概念：弹性盒子是是css3的一种新的布局方式

2，目的：提供一种更加有效的方式来对容器中的子元素进行排列、对齐和分配空间

3，传统布局vs弹性布局
①传统布局：

• 兼容性好
• 布局繁琐
• 局限性，不会在移动端有很好的呈现
• pc端页面中更多使用传统布局

②弹性布局

• 不同屏幕大小，不同设备，都保证元素拥有恰当的布局方式
• 操作方便，布局简单，移动端使用广泛
• pc端浏览器支持情况较差
• IE11及以下浏览器中不支持或部分支持
• 在盒模型中较为灵活

4，设置弹性盒子
任何一个容器都可以指定为弹性盒，容器通过设置display属性值为flex或者inline-flex将其定义为弹性容器，弹性容器内包含了一个或多个弹性子元素。
设置：

.box{ display: flex; }

.box{ display:inline-flex; }

注意：
//弹性容器外及弹性子元素是正常渲染的，弹性盒子只定义了弹性子元素如何在弹性容器内的布局
//父元素设置为flex之后，子元素的float、clear和vertical-align属性也将会失效

5，容器属性
设置在父元素的属性：

①，flex-direction ：决定主轴的方向（子元素的排列方式）
属性值：

//语法
.box{ flex-direction: row | row-reverse | column | column-reverse; }

flex-direction: row（默认值，主轴水平方向，起点在左）；
flex-direction: row-reverse（主轴水平方向，起点在右）；
flex-direction: column（主轴垂直方向，起点在上）;
flex-direction: column-reverse（主轴垂直方向，起点在下）;

②，justify-content ：定义项目在主轴上的对齐方式

//语法
.box{justify-content: flex-start | flex-end | center | space-between | space-around;}

justify-content: flex-start（默认值，元素左对齐）
justify-content: flex-end（元素右对齐）
justify-content: center（元素中间对齐）
justify-content: space-between（两端对齐，子元素间间隔相等）
justify-content: space-around（每个元素之间的间隔相等）

③，align-items ：定义元素在交叉轴（与主轴垂直方向）上的对齐方式

//语法
.box{align-items: flex-start | flex-end | center | baseline | stretch;}

align-items: flex-start （交叉轴起点对齐）
align-items: flex-end（交叉轴终点对齐）
align-items: center（交叉轴中点对齐）
align-items: baseline（项目的第一行文字的基线对齐）
align-items: stretch（默认值，如果子元素未设置高度或者高度为auto，将沾满整个容器）

④，flex-wrap ： 定义如果主轴上元素排不下，如何换行

//语法
.box{flex-wrap: nowrap | wrap | wrap-reverse; }

flex-wrap: nowrap （默认，不换行，每个内容宽会变小）
flex-wrap: wrap（换行，第一行在上面）
flex-wrap: wrap-reverse（换行，第一行在下方）

设置在子元素的属性：
①，order ：定义项目的排列顺序，数值越小，排列越靠前，默认值为0

//语法：
//CSS：
.inner1{order: 1;}
.inner2{order: 0;}
.inner3{order: 4;}
.inner4{order: -1;}
.inner5{order: 2;}
//html
<div class="wrap">
    <div class="inner1">1</div>
    <div class="inner2">0</div>
    <div class="inner3">4</div>
    <div class="inner4">-1</div>
    <div class="inner5">2</div>
</div>

②，flex-grow ：子元素放大比例，默认为0，即存在剩余空间也不放大；
如果所有的子元素的flex-grow值都是1，则他们将等分剩余空间（如果有的话）；
如果一个项目的flex-grow的属性为2，其他属性为1，则前者的剩余空间比其他项多一倍

//语法
//CSS
.inner1{flex-grow: 1;}
.inner2{flex-grow: 1;}
.inner3{flex-grow: 2;}
.inner4{flex-grow: 4;}
.inner5{flex-grow: 1;}
//html
<div class="wrap">
    <div class="inner1">1</div>
    <div class="inner2">2</div>
    <div class="inner3">3</div>
    <div class="inner4">4</div>
    <div class="inner5">5</div>
</div>

③，flex-shrink ：子元素缩小比例，默认为1，如果空间不足，该元素缩小；用法与flex-grow类似。
④，align-self：定义弹性容器内被选中元素的对齐方式，和弹性容器的align-items属性作用相同。
属性值：
auto：默认值，元素继承他的父元素的align-items属性，如果父容器，则为“stretch”；
stretch：占满整个容器的高度；
center：交叉轴的中点对齐；
flex-start：交叉轴对齐方式；
flex-end：交叉轴的终点对齐；
baseline：项目第一行文字的基线对齐；
inherit：从父元素继承属性。