flex 弹性布局属性（重点！！）----------1
作者：互联网
flex布局：
描述：flex是弹性布局 用来为盒子模型提供最大的应用以及最大的灵活，任何一个容器都可以指定flex布局
语法介绍:display:flex;
表示设置当前容器为弹性盒子，此时容器内部的float。clear，，，，，样式失效
引入两个名词：容器和项目
容器：添加了display：flex的元素
项目：容器中直接子元素
接图解释：box这个样式里面设置了display：flex;那么这个盒子可以称之为容器
而里面的子元素直接包含的子元素被称为项目。
弹性盒子样式(此篇文章我以常用样式怎么解释及讲解，快速上升了解flex布局应用，)
容器样式;justify-content；（水平排列样式）
align-items; (垂直排列方式）
flex-direction：(排列方向）
flex-wrap：（是否断行）
flex-flow：（排列方向 是否断行）前面两个样式的简写
项目样式：flex-grow（通俗来讲就是除去固定宽度所占有的比例）
................................................................
下面我将用实例讲解以上属性的应用（写在容器里面的属性值）
just-content属性定义了项目在水平轴上的对齐方式
①just-content ：flex-start flex-end center space-between space-around
当设置了flex-start之后和没设置一样，没发生变化，此属性默认，子元素从左至右依次排列 也就是左对齐
同理 当给容器加上justify-content：flex-end之后 子元素从右至左排列， 也就是右对齐
当我们设置居中对齐显示是justify-content： center；
设置justify-content：space-between和justify-content：space-around效果分别是这样的，
justify-content：space-between：两端分别顶对齐 两端是贴边的。
而justify-content：space-around;所占有的比例是一样的，所以最左或者最右的边距是中间边距的一半
........................................................................
②align-items 定义在垂直方向的对齐方式（准确的说就是根据flex-direction来确定垂直的方向）
align-items：flex-start flex-end center baseline stretch
我们先来看默认属性（没加align-items：flex-start；）
加了此属性时从上往下 开始排列，相当于时顶对齐。
同理 加了align-items：flex-end（center）就是顶对齐和中部对齐。
此盒子的父级我是给的500像素高
所以是根据高度500像素内居中或者底部对齐，
align-stretch 默认 它会填满父级的范围高度，（如下图）
align-items：baseline 表示基线对齐，
③ flex-direction 此属性定义了弹性盒子里面的项目排列的方向
有以下几个属性值：
flex-direction：row （默认排列，从左至右）
flex-direction：row-reverse；从右至左
flex-direction：column； （从上至下排列）
flex-directiom：column-reverse；（从下至上排列）
下面我会对flex-direction的几个属性进行图文配置，更好的理解几个属性的作用，
flex-direction：row 弹性盒子里面的项目从左至右排列，
和默认一样从左至右排列。
flex-direction：row-reverse；弹性盒子里面的项目从右至左排列，
flex-direction：column；弹性盒子容器里面的直接项目从上至下排列。
同理 flex-direction：column-reverse；弹性盒子容器里面直接项目从下之上排列。
④ flex-warp（规定项目是否换行）
此属性有一下几个属性值：
flex-wrap：nowarp（默认 不换行）
flex-wrap：warp （换行 第一行在上方）
flex-warp：wrap-reverse；（换行，第一行在下方）
实例代码显示页面的样子
flex-warp：nowarp；不换行 和 flex-warp：warp：和flex-warp：warp-reverse；（换行，第一行在下方）
扩展：为啥换行之后有间隙。
那是因为项目在排列的时候会默认根据自己大大小占等比例占容器，
当我不给项目高度的时候 页面显示后就会明白为啥会有间隙，
但是有需求会时这样的给高度的时候要在挨着显示，
要引入一个设置在容器里面的属性 align-content;(表示有超过一个轴线的情况下轴线的对齐方式)
就比如说上面例子：有两排，相当于有两个轴线
根据align-content：设置相关属性让他排列有上部挨在一起显示，底部挨在一起显示，中部显示，上部和下部贴边显示，每个项目占的左右间距相等显示。
align-content：flex-start 上部挨在一起显示。间距消失挨在一起，
align-content：flex-end 下部挨在一起显示。间距消失挨在一起，
align-content：center 中部挨在一起显示。间距消失挨在一起，
align-content：space-around 每根轴线所占有的上下间距一样。
align-content：space-between 第一根轴线在上贴边 最后一根轴线下面贴边。
flex-flow：flex-direction flex-warp
flex-flow 此属性是项目方向和换行两个属性合并的，
比如说从右至左 换行显示可以这样写： flex-flow：row-reverse warp；
flex-flow：row nowarp （默认 一排上显示 不换行）
以上全部内容 全部写在容器里面的属性
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
写在项目里面的属性
flex-grow ：1；（表示除里面固定宽度以外 设置了这个属性的项目规定占满多余的空间）
没设置之前先说明一下：容器宽度是500像素 里面的项目三个项目都是100px 说明他的宽度还有200px空闲的
当我们给hezi2设置了flex-grow：1；它表示除固定宽度以外它一个盒子宽度将占满父级空闲的宽度 则他的宽度变为300px
他的弹性变化根据主轴来申长
比如把他的主轴设为从上往下伸长
扩展几个项目里面的属性值
order （排序位置）
flex-shrink （表示父级宽度不够时 项目的缩小比例）
flex-basis （表示父级宽度有空余空间的情况下 项目占据主轴空间大小）
flex：此属性时order flex-shrink flex-basis 的简写 它默认是 flex：0 1 auto；
align-self 表示可以覆盖align-items里面的属性值
order实例 根据之前例子 我想设置hezi3在第一个位置
设置hezi1在最后一个位置
我自己理解是 负值往前站 正值往后站 负的越多越靠前 正的越多越靠后。
flex-shrink实例 把盒子项目宽度特意加大一点 三个项目的宽度大于父级宽度 第一个hezi1宽度不变 其它两个宽度剩余空间平均分摊
因为父级盒子500px宽 项目加起来有600px 所以默认是每个盒子166.6px
当我需要第一个盒子为我之前写的那一个200px宽度 剩余空间300px后面两个盒子分
flex-basis 属性 实例 还是之前盒子 项目宽度都改为100px 我想让盒子2是200px宽度
align-self 属性 实例 还是之前案例 我想让第二个盒子在底部显示
以上是flex弹性盒子大部分相关内容。
标签：flex,direction,盒子,align,content,----------,属性 来源： https://www.cnblogs.com/xiaoshuang1234/p/16177025.html