失眠网 > 端午安康今天讲的是Flex布局

端午安康今天讲的是Flex布局

时间：2020-12-09 01:37:38

相关推荐

端午安康今天讲的是Flex布局

网页属性Flex布局

容器

flex-direction 容器内项目的排列方式

row 项目从左往右排列（默认值）

colum 项目从上往下排列

row-reverse 项目从右往左排列

colum-reverse 项目从下往上排列

flex-wrap 项目放不下了是否换行

nowrap 不换行（默认值）

wrap 换行

wrap 换行后翻转

justify-content 项目在主轴上的对齐方式

flex-start 排在容器的开始位置（默认值）

flex-end 排在容器的末尾

center 排在容器的中间

space-between 项目之间有相同大小的空隙

space-around 开始、结束以及项目之间有空隙，开始和结束的空隙是项目之间空隙的一半

spance-evenly 开始、结束以及项目之间有空隙，空隙大小相同

align-items 交叉轴的对齐方式

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content 多个主轴的对齐方式（多行，不常用）

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

项目

order 项目排列顺序，数值越小，排列越靠前。默认为0

flex-grow 放大比例（剩余空间按比例分配）。默认为0，不放大

flex-shrink 缩小比例。默认为1，自动缩小

flex-basis 设置项目宽度，内容超出范围会自动变大

align-self 允许单个项目与其他项目有不同的对齐方式

<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box1 {background: red;/* width: 30%; *//* flex-shrink: 0; */}.box2 {background: yellow;/* width: 30%; *//* flex-shrink: 0; */}.box3 {background: blue;/* width: 30%; *//* flex-shrink: 0; */}.box4 {background: green;/* width: 30%; *//* flex-shrink: 0; *//* flex-grow: 1; */}.box5 {background: gray;/* width: 30%; *//* width: 30px; */flex-basis: 30px;order: -1;/* flex-shrink: 0; *//* flex-grow: 1; */align-self: flex-start;}.container {height: 300px;display: flex;/* flex-direction: column-reverse; *//* flex-wrap: wrap; */justify-content: space-evenly;align-items: center;/* align-content: space-between; */}</style></head><body><div class="container"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div><div class="box4">4</div><div class="box5">5</div></div></body></html>