弹性盒子内容体居右对其_弹性盒子：布局方案

作用：控制离它最近的一层子元素,布局方式。

特点：

a：弹性盒子里面的离它最近的一层子元素都可以添加大小。

b: 如果想让弹性盒子里面的一个子元素左右上下居中，只需要给子元素添加margin:auto即可

c: 弹性盒子里面的子元素都是沿着“主轴”排列

"主轴":有可能是X轴也有可能是Y轴，如果X轴为主轴，Y轴就是侧轴。

注：默认情况下X轴为主轴。

一：触发弹性盒子：

display:flex;

二：改变主轴的方向：

flex-direction:

属性值：

row (默认值：X轴为主轴)

column (Y轴为主轴)

column-reverse (以Y轴为主轴反向排列)

row-reverse (以X轴为主轴反向排列)

三：改变主轴的对齐方式：

justify-content:

属性值：

flex-start 默认状态：在弹性盒子开始的地方显示

flex-end 在弹性盒子末端对齐

center 居中对齐

space-between 两端对齐

space-around 自动分配间距

四：侧轴的对齐方式:

align-items:

flex-start 侧轴开始的位置

flex-end 侧轴结束的位置

center 侧轴居中的位置

baseline 基线(flex-start等效)

stretch(默认值) 拉伸

五：控制弹性盒子里面的子元素(灵活元素)换行处理：

flex-wrap:

wrap 换行

nowrap 不换行

wrap-reverse 反向换行

六：控制行与行的对齐方式：

align-content:

flex-start 默认状态：行与行之间不存在默认的行间距

flex-end 在弹性盒子末端对齐

center 居中对齐

space-between 两端对齐

space-around 自动分配间距

七：补充：flex-direction 和 flex-wrap简写：

flex-flow:;

注：以上7个属性全部添加在父元素弹性盒子上面！！！！！！！！！！！！！

添加在子元素上面的属性：

一：控制弹性盒子里面 某个 灵活元素 在侧轴的对齐方式。

align-self:

auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。

Stretch元素被拉伸以适应容器。

Center元素位于容器的中心。

flex-start元素位于容器的开头。

flex-end元素位于容器的结尾。

二：控制子元素的排列顺序：

order: 数值越大越往后排列。支持负数。

三：剩余空间的分配：

flex:1; 分配主轴剩余空间。

flex:1; 简写形式：

flex-grow:; 扩展的量

flex-shrink:; 收缩的量

flex-basis:; 元素的大小

记住：flex-shrink:0; 不压缩。