Css布局

css布局

表格布局

div class=“tabble”
dislapy: table 就是div标签替换为table标签

浮动布局

对自身影响，脱离文档流,
使元素独立起来并且可以设置宽高。
对兄弟元素影响，改变兄弟元素布局 。
对父容器影响是造成坍塌 。

定位 布局

固定布局，使用标准px单位 --><-II
人一ii.流式布局，使用百分比% -->

多列布局

父容器上设置行宽column-width: 200px;

弹性布局

什么是flex

Flex 也叫弹性布局
是一种非常流行的 web 页面快速布局解决方案；
Flex 也可以实现子元素在父元素中自动伸缩

主轴与侧轴的概念

主轴就是弹性盒子子元素沿着排列的轴；与主轴垂直的轴称为
侧轴。
如果你有 row ,则主轴是水平方向，侧轴是垂直方向。
如果你有 column,则主轴是垂直方向，侧轴是水平方向

弹性盒子属性

display: flex

display：flex适用于父类容器元素上，将原本的div盒子变成弹性盒子。
**flex：**将对象作为弹性伸缩盒显示。
flex-flow (适用于父类容器上)复合属性。
flex-direction (适用于父类容器的元素上):设置或检索伸缩盒对象的子元素在父容器中的位置。
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列，右对齐，从后往前排，最后一项排在最前面。
column： 纵向排列。
column-reverse: 反转纵向排列，从后往前排，最后一项排在最上面。
flex-wrap 适用于父类容器上
设置或检索伸缩盒对象的子元素
超出父容器时是否换行。
nowrap：当子元素溢出父容器时不换行。
wrap： 当子元素溢出父容器时自动换行。
wrap-reverse： 当子元素溢出父容器时自动换行,方向同
wrap 反转排列。

justify-content

适用于父类容器上
设置或检索弹性盒子元素在主轴方向上的对齐方式。
flex-start：弹性盒子元素将向行起始位置对齐。
flex-end：弹性盒子元素将向行结束位置对齐。
center：弹性盒子元素将向行中间位置对齐。
space-between: 弹性盒子元素会平均地分布在行里。
space-around: 弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。

align-items

适用于父类容器上： 设置或检索弹性盒子元素在侧轴方向上的对齐方式。
**flex-start：**弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
**flex-end：**弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
**center：**弹性盒子元素在该行的侧轴（纵轴）上居中放置。

align-self

适用于弹性盒模型子元素： 设置或检索弹性盒子元素自身在侧轴方向上的对齐方式。
**auto：**如果’align-self’的值为’auto’，则其计算值为元素的父元 素 的 ‘align-items’ 值 ， 如 果 其 没 有 父 元 素 ， 则 计 算 值 为’stretch’。
flex-start： 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end： 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center： 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline： 如弹性盒子元素的行内轴与侧轴为同一条
**stretch：**如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸。

align-content

适用于父类容器上 ：设置或检索弹性盒堆叠伸缩行的对齐方式。
flex-start： 各行向弹性盒容器的起始位置堆叠
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-between： 各行在弹性盒容器中平均分布。
space-around： 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
stretch： 各行将会伸展以占用剩余的空间。