css 弹性盒子 flex布局

css弹性盒子flex 布局

什么是flex

flex是flexible Box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为flex布局，不仅是div这种行级元素，还有span这种块级元素，都可以指定为flex布局。

• 当我们为父盒子指定为flex布局以后，子元素的float、clear（清除浮动）和vertical-align属性将失效
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素，称为Flex容器，简称容器，它所有的子元素自动成为容器成员，称为flex项目

• 子元素可以横向排列也可以纵向排列

原理：就是通过给父盒子添加flex属性，来控制盒子的位置和排列方式

常见父项属性

以下六个属性是对父元素设置的

• flex-dierction：设置主轴的方向
• justify-content：设置主轴上的子元素的排列方式
• flex-warp：设置子元素是否换行
• align-content：设置侧轴上的子元素的排列方式（多行）
• align-items：设置侧轴上的子元素排列方式（单行）
• flex-flow：复合属性，相当于同事设置了flex-direction和flex-wrap

概念与案例

主轴与侧轴

在flex布局中，分主轴和侧轴两个方向，同样的叫法有行和列，x轴和y轴

• 默认主轴方向就是x轴方向，水平向右
• 默认侧轴方向就是y轴方向，水平向下
  

flex-direction设置主轴的方向

注意：主轴和侧轴是会变化的，看flex-direction设置谁为主轴，剩下的就是侧轴，而我们的子元素就是跟着主轴来排列的。

属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

reverse（翻转的意思，不是重点）

justify-content 设置主轴上的子元素排列方式

控制子元素是通过父元素控制的
justify-content 属性定义了项目（子元素）在主轴上的对齐方式
使用该属性前要确定好主轴是哪个

属性值	说明
flex-start	默认值从头部开始，如果主轴是x轴，则从左到右（子元素左对齐）
flex-end	从尾部开始i（子元素右对齐）
center	在主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间（重要）

flex-wrap 设置子元素是否换行

默认情况下，子元素都排列在一条线上（也就是主轴线上），也就是不换行，无论是否超过父元素的大小，如果超出，就会修改子元素的大小，flex-wrap属性定义flex不居中子元素如何换行

属性值	说明
nowrap	不换行（默认）
wrap	换行

align-items 设置侧轴上的子元素排列方式（单行）

当我们要设置子元素在父元素中水平居中垂直居中时，不仅使用justify-content让其在主轴方向居中，还要设置在侧轴上居中，这样就可以实现水平和垂直居中
而align-items就是设置子元素在侧轴上的排列方式**（单行【单行的意思就是与上面的flex-wrap一样，当设置flex-warp为换行后，侧轴上就有多行元素，那么仅仅设置align-items是将其他行都当做第一行来显示效果】）**

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stratch	拉伸（默认值）

如下图就是拉伸效果，意思就是沿着侧轴方向铺满整个父元素，下面是 因为有外边距，所以没有全部铺满

align-content 设置侧轴上的子元素（多行）

一般情况下，使用了flex-warp给子元素换行后，那么在侧轴上的子元素排列方式使用该属性设置。而没有换行的情况下，使用align-items。如果单行则使用该属性无效

属性值	说明
flex-start	默认值，在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子元素在侧轴平分剩余空间
space-between	子元素在侧轴先分布在两头，在平分剩余空间
stretche	设置子元素高度平分父元素高度（看起来就跟没设置这个属性一个b样）

总结：单行用align-items 多行（也就是使用了flex-wrap）使用align-content

flex-flow 复合属性

flex-flow属性是flex-direction 和 flex-warp的复合属性
例如：flex-flow：row wrap 表示主轴是行，并且换行

flex布局子项常见属性

• flex 子项目占的份数
• align-self 控制子项自己在侧轴的排列方式
• order 定义子项的排列顺序（前后顺序）

flex（重要）

作用：定义子项目分配剩余空间，用flex表示占多少份数

.item{
	flex:<number>;
}

案例：

	<style>
		.content{
            display: flex;/*设置为弹性盒子*/
            justify-content: space-between;/*子元素分局两侧*/
        }
        .item{
            height: 50px;
            margin: 5px;
            width:50px;
        }
        .center{
        	flex:1;/* 表示占剩余空间的几份 */
        }
        div{
            border: 1px solid #c3c3c3;
        }
    </style>
 	<div class="content">
        <div class="item"></div>
        <div class="item center"></div>
        <div class="item"></div>
    </div>

这段代码的意思就是父容器是flex盒子，子容器按照主轴方向排列，排列方式为分居两侧，剩余空间由其他元素平分，而当我们设置中间子容器为flex：1 表示中间盒子自己独占剩余空间，如果设置为flex：2效果不变，因为设置为2的意思就是将剩余空间拆分为2份，你自己占两份。如果我们不给子元素指定宽度，则会自动按照份数拆分剩下的空间自己给自己宽度

如上图，我们再加一个盒子，这个时候，设置的方式就不一样了，比如我们设置第二个盒子为flex：2 设置第三个盒子为flex：1 就表示剩余空间被拆为三份，第二个占2分，第三个占1分。
再看一个案例：

	 <style>
	 	.content{
            display: flex;/*设置为弹性盒子*/
            justify-content: space-between;/*子元素分局两侧*/
        }
        .item{
            height: 70px;
            margin: 5px;
            flex: 1;
        }
        div{
            border: 1px solid #c3c3c3;
        }
        .item-sub{
            height: 25px;
            margin: 5px;
        }
    </style>
	<div class="content">
        <div class="item"></div>
        <div class="item">
            <div class="item-sub"></div>
            <div class="item-sub"></div>
        </div>
        <div class="item">
            <div class="item-sub"></div>
            <div class="item-sub"></div>
        </div>
    </div>

上面这个布局就是相当于这个图片，将父容器设置为弹性盒子，然后子容器分别占一份

align-self

作用：控制某个子元素在侧轴上的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
我们知道，在flex布局中，可以通过给父元素设置align-item来控制子元素在侧轴上的排列方式，例如
| flex-start| 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中（垂直居中） |
| stratch | 拉伸（默认值） |
但是这样的情况就是父元素的子元素全部统一对齐，而如果我们想某个子元素单独对齐，就可以使用这个属性align-self

order

作用：定义项目的排列顺序。与改变标签顺序的效果一样，不过这个是根据css属性来改变标签的排列顺序的。
数值越小，排列越靠前，默认为0
注意：和z-index不一样