弹性盒子布局

一、CSS3弹性盒子

弹性盒子是CSS3的一种新布局模式。
CSS3 弹性盒，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

二、css3弹性盒子的所有属性

*1.flex-direction属性====>>决定项目的方向*
flex-direction有四个属性值分别为：row || row-reserve || column || column-reverse
[row]:默认值，元素水平显示，一行排列
[row-reserve]:和row一样一行排列，但是它和row的排列方向相反
[column]:元素垂直显示，就是一列
[column-reverse]:和column一样是一列，但是排列顺序的颠倒的
*2.flex-wrap属性====>>决定元素单行还是多行*
flex-wrap有三个属性值分别为：nowrap || wrap || wrap-reserve
[nowrap]:默认值，元素在一行排布，不换行
[wrap]:元素在必要的时候进行换行
[wrap-reserve]:元素在必要的时候进行换行，但是它是以相反的顺序排列的
3.flex-flow属性
flex-flow属性是flex-directio和flex-wrap的简写形式，默认值是 row nowrap
*4.align-items属性====>>定义盒子在在纵轴上的对齐方式*
align-items有五个属性值分别为：stretch || center || flex-start || flex-end || baseline
[stretch ]:默认值，拉伸项目来适应布局
[center ]:项目在容器的中心排列
[lex-start]:项目从容器的开始位置排列
[flex-end]:项目从容器的结尾地方开始排列
[baseline]:项目的位置在容器的基线上
容器基线：
*5.justify-content属性====>>定义盒子在横轴上的对齐方式*
justify-content属性有五个属性分别为：flex-start || flex-end || center ||| space-around || space-between
[flex-star]:默认属性，项目位于盒子的开头
[flex-end]:项目位于容器的结尾
[center]:项目位于容器的中心
[space-around]:项目在每一行的前后左右都留有空白的位置
[space-between]:在容器内。各行之前都留有空白

三、弹性子元素属性

弹性子元素属性一共有六种分别为：order || flex-grow || flex-shrink || flex-basis || flex || align-self
[order ]:设置弹性盒子子元素的排列顺序
[flex-grow ]:设置或者检索弹性盒子元素的扩展比率
[flex-shrink]:指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容 器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
[flex-basis ]:用于设置或是检索弹性盒子伸缩基准值
[flex]:设置弹性和盒子的子元素如何分配空间
[align-self`]:在弹性子元素上使用，覆盖容器的align-items属性

1.order属性
用整数定义排列的顺序，数值小的在前面，默认值为0
2.flex-grow
一个数字规定一个项目相对于其他项目的扩展值，默认值为0
3.flex-shrink属性
一个数字规定一个项目相对于其他项目的收缩值，默认值为0
4.flex-basis
一个长度单位或者一个百分比单位，规定元素的初始值 auto默认值，长度等于元素的长度，如果该项目未指定长度，则长度将根据内容决定
5.flex属性
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性,共有七个属性值：flex-grow || flex-shrink || flex-basis || auto || none || initial || inherit
[flex-grow]:一个数字，规定项目相对于其他元素的扩展量
[flex-shrink]:一个数字，规定项目将相对于其他元素进行收缩的量
[flex-basis]:项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字
[auto]:与 1 1 auto 相同
[none]:与 0 0 auto 相同
[initial]:设置该属性为它的默认值，即为 0 1 auto。
[inherit]:从父元素继承该属性。
6.align-self 属性
[auto]:默认值，元素继承了它的父容器的align-items属性，如果没有父容器则为“stretch”
[stretch]:元素被拉伸以适应容器
[cnter]:元素位于容器的中心
[flex-start]:元素位于容器的开头
[flex-end]:元素位于容器的结尾
[baseline]:元素位于容器的基线
[initial]:设置改元素的默认值
[inherit]:从父元素继承属性

四、flex布局的使用场景

1.骰子布局
2.网格布局
1.网格布局：最简单的网格布局，就是平均分布。在容器里面平均分配空间，骰子布局很像，但是需要设置项目的自动缩放 2.百分比布局：某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间
3.圣杯布局
圣杯布局指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部，躯干，尾部。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏
在这里插入图片描述
4.流式布局
5.底部固定
有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部
6.悬挂式布局