弹性布局的设置

一,弹性布局

 flex就是flexible box的缩写,意为弹性布局,用来为盒装模型提供最大的灵活性
任何一个容器都可以指定为flex布局

.box{ display: flex; }

行内元素当然也可以使用flex布局

.box{ display: inline-flex; }

内核的浏览器,必须加上-webkit前缀。

.box{ display: -webkit-flex; /* Safari */ display: flex; }

注意:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。

二,概念,术语

首先,我们需要了解一下 Flex 布局中的一些概念和术语:
flex 容器(flex container)
flex 项目(flex item)
主轴(main axis)
交叉轴(cross axis)
占用主轴空间(main size)
占用交叉轴空间(cross size)
线轴起止点(main start、main end、cross start、cross end)

关系图

弹性布局的设置_第1张图片

三,应用在 flex container 上的属性

1. flex-direction: 设置主轴(main axis)的方向

2. flex-warp: 设置 flex-items 是否可以换行

3. flex-flow: flex-direction flex-warp 属性连写

4. justify-content: 设置 flex items 在主轴(main axis)上的对齐方式

5. align-items: 设置 flex items 在交叉轴上的对齐方式(一般针对单行)

6. align-content: 设置 flex items 在交叉轴上的对齐方式(一般针对多行)

四,应用在 flex items 上的属性

1. order: 设置 flex items 的排列顺序

2. flex-grow: 决定了 flex items 在主轴方向上如何扩展

3. flex-shrink: 决定了 flex items 在主轴方向上如何收缩

4. flex-basis: 设置 flex items 在主轴上的 base size

5. flex: flex-grow flex-shrink? || flex-basis 连写

6. align-self: 允许 flex items 覆盖 flex-container 设置的 align-items 属性
 

你可能感兴趣的:(java,servlet,html)