弹性盒的属性分为两部分:
父元素:
-
display:flex/inline-flex;
- flex:块级弹性盒;
- inline-flex:行内块级弹性盒;
- 注意:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
- 弹性盒只针对第一级子元素生效;
-
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 :在元素左右自动分配距离
- space-evenly; 设置元素之间的空隙相等
-
align-items属性定义侧轴方向是如何对齐。
- flex-start :沿着侧轴的起始点对齐的;
- flex-end : 沿着侧轴的终点对齐的;
- center : 沿着侧轴的中间位置对齐的;(相对比较常用)
- baseline : 沿着侧轴的基线对齐的
- stretch(默认值):拉伸至同父元素一样高;
-
align-content属性定义了多根轴线的对齐方式。对于单行子元素,该属性不起作用。
- align-content在侧轴上执行样式的时候,会把默认的间距给合并
- flex-start 没有行间距 沿顶部对齐
- flex-end 底对齐没有行间距
- center 居中没有行间距
- space-between 两端对齐,中间自动分配
- space-around 自动分配距离
- space-evenly :设置元素之间的空隙相等
- stretch 默认值。项目被拉伸以适应容器。 当子元素设置了高度后,在默认位置显示
子元素:
- align-self属性
- auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
- Stretch 元素被拉伸以适应容器。
- Center 元素位于容器的中心。
- flex-start 元素位于容器的开头。
- flex-end 元素位于容器的结尾。
-
order
- number排序优先级,数字越大越往后排,默认为0,支持负数。
- 默认情况下:按照HTML的书写顺序进行排列的;
-
flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。
- 属性值:是一个数字,不用加单位
- 默认值:0; 不扩展;
- 属性值为1的时候就是扩展;
- 1、2、3、4、5、6…
-
flex-grow 会改变元素原有的大小;沿着主轴进行变化
-
flex-shrink :一个数字,规定项目将相对于其他灵活的项目进行收缩的量。
- flex-shrink:1;
- 默认值 : 1: 收缩
- 0:不收缩
-
flex-basis: 项目的长度
- flex-basis 的权重 大于width;
- 复合式写法:flex(比较常用)
-
flex-grow flex-shrink flex-basis
- flex:1 2 3 4…
- 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间
- 多列属性 多列布局类似报纸或杂志中的排版方式,主要用以控制大篇幅文本。
- column-count : 分隔列数
- 说明:属性规定元素应该被分隔的列数
- 用于:除table外的非替换块级元素, table cells, inline-block元素
- column-gap : 设置列与列之间的间隔大小;
- column-rule : 添加列与列之间的边框 复合属性。
- column-rule-color规定列之间规则的颜色。
- column-rule-style规定列之间规则的样式。
- column-rule-width规定列之间规则的宽度。
- column-fill : 设置列与列之间的高度是否统一
-
auto:列高度自适应内容
-
balance:所有列的高度以其中最高的一列统一 (默认值)
-
column-span : 跨列或者不夸列
- 设置或检索对象元素是否横跨所有列。
- none:不跨列 all:横跨所有列
-
column-width : 设置或检索对象每列的宽度
- 说明:当column-width 和column-count 同时存在的时候;
- column-width :最小宽度
- column-count :最多列数
-
复合式写法:
- columns
- column-width 和 column-count
- columns:200px 5;
- 注:Internet Explorer 10 和 Opera 支持多列属性。
- Firefox 需要前缀 -moz-。
- Chrome 和 Safari 需要前缀 -webkit-。
-
break-inside CSS 属性描述了在多列布局页面下的内容盒子如何中断,如果多列布局没有内容盒子,这个属性会被忽略。
-
auto:既不强迫也不禁止在元素内部断行并产生新列
-
avoid:避免在元素内部断行并产生新列