css中的弹性盒子和弹性布局

简介: css中的弹性盒子和弹性布局

1、display:flex

说明:

设置为弹性盒 (父元素添加)

2、flex-direction (主轴排列方式)

说明:

顺序指定了弹性子元素在父容器中的位置

row 默认在一行内排列

row-reverse: 反转横向排列 (右对产,从后往前排,最后一项排在最前面

column: 纵向排列。

column-reverse

3、justify-content (主轴对齐方式)

说明:

内容对齐 (justify-content) 属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线 (main axis)对

flex-start默认,]顶端对产

flex-end天端对文

center居中对产

space-between两端对产,中间自动分配

space-around自动动分西客

4、align-items 侧轴对齐方式)

说明:

侧轴对产方式

flex-start: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界

flex-end: 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界

center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两人方向溢出相

同的长度)。

baseline: 如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start 等效,其它情况下,该值将参与基线对文

5、flex-wrap

说明:

该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

nowrap: flex容器为单行。该情况下flex了项可能会溢出容器

wrap: flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行

6、align-content (行与行之间对产方式

说明:

当伸缩容器的侧轴还有多余空间时,本属性可以用来调准一伸缩行在伸缩容器里的对齐方式,这与调准伸缩项目在主轴上对齐

方式的<justify-content'> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果

flex-start没有行间距

flex-end底对产没有行间距

center居中没有行间距

space-between两端对文,中间自动分配

space-around自动分配距离

7、align-self

说明:

align-self 属性规定灵活容器内被选中项目的对产方式

注意: align-self 属性可重写灵活容器的 align-items 属性

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

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

Center 元素位于容器的中心。

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

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

8、order

说明:

number排序优先级,数字越大越往后排,默认为0,支持负数



说明:

9、复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。

缩写 [flex: 1],则其计算值为 [1 1 0%

缩写 [flex: auto],则其计算值为 [1 1 auto

flex: none],则其计算值为 [0 0 auto

flex: 0 auto] 或者 [flex: initial],则其计算值为 0 1 auto] ,即 [flex] 初始值

10、flex三个属性值介绍

flex-grow

个数字,规定项目将相对于其他灵活的项目进行扩展的量

flex-shrink

个数字,规定项目将相对于其他灵活的项目进行收缩的量。

flex-basis

项目的长度


三、CSS3 多列

1、column-count

说明:

属性规定元素应该被分隔的列数

适用于: 除table外的非替换块级元素,table cells,inline-block元素

2、column-gap

说明

说明:

属性规定列之间的间隔大小

3、column-rule

说明:

设置或检索对象的列与列之间的边框。复合属性。

column-rule-color规定列之间规则的颜色

column-rule-style规定列之间规则的样式

column-rule-width规定列之间规则的宽度。

4、column-fill

说明:

设置或检索对象所有列的高度是否统

auto: 列高度自适应内容

balance: 所有列的高度以其中最高的一列统

5、column-span

说明:

设置或检索对象元素是否横跨所有列

none: 不跨列

all: 横跨所有列

6、column-width

说明

设置或检索对象每列的宽度


相关文章
|
27天前
|
前端开发
玩转CSS盒子之 三角形盒子
玩转CSS盒子之 三角形盒子
16 0
|
27天前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
11 0
|
1月前
|
设计模式 前端开发 开发者
css 三栏布局的实现
css 三栏布局的实现
22 0
|
2天前
|
Web App开发 存储 前端开发
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
|
18天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
19 0
|
21天前
|
前端开发 JavaScript API
|
1月前
|
前端开发 容器
CSS布局模式之Flex布局&Grid布局(三)
CSS布局模式之Flex布局&Grid布局
|
1月前
|
前端开发 开发者 容器
CSS布局模式之Flex布局&Grid布局(二)
CSS布局模式之Flex布局&Grid布局
|
1月前
|
前端开发 开发者 UED
CSS布局模式之Flex布局&Grid布局(一)
CSS布局模式之Flex布局&Grid布局
|
1月前
|
编解码 前端开发 JavaScript
前端css常用的几种布局方式(推)
前端css常用的几种布局方式(推)
40 0