网页设计css布局方式,css制作网页布局代码

首页 > 技术 > 作者:YD1662023-02-09 15:47:00

justify-content 属性

flex-flow 属性

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap。

.ele { flex-flow: <flex-direction> || <flex-wrap>; }复制代码align-items 属性

align-items属性定义子容器在交叉轴上如何对齐。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

.ele{ align-items: flex-start; // 交叉轴的起点对齐。 align-items: flex-end; // 交叉轴的终点对齐。 align-items: center; // 交叉轴的中点对齐。 align-items: baseline; // 项目的第一行文字的基线对齐。 align-items: stretch; // 默认,如果项目未设置高度或设为auto,将占满整个容器的高度。 }复制代码

网页设计css布局方式,css制作网页布局代码(9)

align-items 属性

align-content 属性

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

.ele{ align-content: flex-start; // 与交叉轴的起点对齐 align-content; flex-end; // 与交叉轴的终点对齐。 align-content: center; // 与交叉轴的中点对齐。 align-content: space-between;// 与交叉轴两端对齐,轴线之间的间隔平均分布。 align-content: space-around; // 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 align-content: stretch; // 默认 轴线占满整个交叉轴。 }复制代码

网页设计css布局方式,css制作网页布局代码(10)

align-content 属性

子容器属性

子容器也有 6 个属性:

order 属性

order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0。

.ele{ order: num; }复制代码

网页设计css布局方式,css制作网页布局代码(11)

order 属性

flex-grow 属性

flex-grow 属性定义子容器的伸缩比例。按照该比例给子容器分配空间。

.ele{ flex-grow: <number>; /* default 0 */ }复制代码

网页设计css布局方式,css制作网页布局代码(12)

上一页12345下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.