CSS：CSS弹性盒子布局 Flexible Box
一、简介
flexbox：全称Flexible Box, 弹性盒子布局。可以简单实现各种伸缩性的设计，它是由伸缩容器和伸缩项目组成。任何一个元素都可以指定为flexbox布局。这种新的布局方案在2009年是由W3C组织提出来的，在此之前，Web开发一般使用基于盒子模型的传统页面布局，依赖定位属性、流动属性和显示属性来解决，参看链接：https://www.cnblogs.com/XYQ-208910/p/5810673.html。弹性盒子布局的出现，极大的方便了开发者，在如今的ReactNative开发中，也已经被引入使用。
伸缩流布局结构图如下：
弹性盒子布局具备的特征：
1、伸缩容器的子元素称为伸缩项目，伸缩项目使用伸缩布局来排版。伸缩布局和传统布局不一样，它按照伸缩流方向布局。
2、伸缩容器由两条轴构成，分别为主轴(main axis)和交叉轴(cross axis)。主轴既可以用水平轴，也可以是竖直轴，根据开发者需要来决定。
3、主轴的起点叫main start，终点叫main end，主轴的空间用main size表示。
4、交叉轴的起点叫cross start，终点叫cross end，交叉轴的空间用cross size表示。
5、默认情况下，伸缩项目总是沿着主轴方向排版，从开始位置到终点位置。至于换行显示，则通过设置伸缩属性来实现。
6、伸缩容器的属性有：display、flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
7、伸缩项目的属性有: order、flex-grow、flex-shrink、flex-basis、flex、align-self
二、伸缩容器的属性，全局设置排版
HTML：[注意：下面的演示截图项目个数会根据需要选择性注释“flex-item”，有时用不到5个]
<!DOCTYPE html>
<html>
<head>
<title>Flexbox</title>
<!-- 采用外联方式导入css文件 -->
<link rel="stylesheet" type="text/css" href="./css_test.css">
</head>
<body>
<span class="flex-container">
<span class="flex-item" id="item1" style="color:white;font-size:20px">1</span>
<span class="flex-item" id="item2" style="color:white;font-size:20px">2</span>
<span class="flex-item" id="item3" style="color:white;font-size:20px">3</span>
<span class="flex-item" id="item4" style="color:white;font-size:20px">4</span>
<span class="flex-item" id="item5" style="color:white;font-size:20px">5</span>
</span>
</body>
</html>
1、display：决定元素是否为伸缩容器
- flex：产生块级伸缩容器
.flex-container {
display: flex;
} - inline-flex：产生行内块级伸缩容器
.flex-container {
display: inline-flex;
}
2、flex-direction：指定伸缩容器主轴的方向
- row：水平方向，从左到右
.flex-container {
display: flex;
flex-direction: row;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
- row-reverse：水平方向，从右到左
.flex-container {
display: flex;
flex-direction: row-reverse;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
- column：竖直方向，从上到下
.flex-container {
display: flex;
flex-direction: column;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
- column-reverse：竖直方向，从下到上
.flex-container {
display: flex;
flex-direction: column-reverse;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
3、flex-wrap：指定伸缩容器主轴方向空间不足时，决定是否换行以及换行方式
- nowarp：不换行
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px; //下图单行状态宽度被重新计算
height: 50px;
background-color: green;
margin: 1px;
}
- warp：换行，若主轴为水平方向，换行方向是从上到下
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
- wrap-reverse：换行，若主轴为水平方向，换行方向是从下到上
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
4、flex-flow：flex-direction和flex-wrap的缩写，同时指定伸缩容器主轴方向和换行设置
- row nowrap：默认主轴是水平方向，从左到右，且不换行
.flex-container {
display: flex;
flex-flow: row nowrap;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px; //下图单行状态宽度被重新计算
height: 50px;
background-color: green;
margin: 1px;
}
5、justify-content：决定伸缩项目沿着主轴线的对齐方式
- flex-start：与主轴线起始位置靠齐
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
- flex-end：与主轴线结束位置靠齐
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
- center：与主轴线中间位置靠齐
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
- space-between：平均分配到主轴线里，第一个项目靠齐起始位置，最后一个项目靠齐终点位置
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
- sapce-around：平均分配到主轴线里，两端保留一半的空间
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
6、align-items：决定伸缩项目不能换行时沿着交叉轴线的对齐方式
- flex-start：与交叉轴线起始位置靠齐
.flex-container {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px; //下图单行状态宽度被重新计算
height: 50px;
background-color: green;
margin: 1px;
}
- flex-end：与交叉轴线结束位置靠齐
.flex-container {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px; //下图单行状态宽度被重新计算
height: 50px;
background-color: green;
margin: 1px;
}
- center：与交叉轴线中间位置靠齐
.flex-container {
display: flex;
flex-flow: row nowrap;
align-items: center;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
- baseline：根据基线对齐
.flex-container {
display: flex;
flex-flow: row nowrap;
align-items: baseline;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
} #item1 {
padding-top: 25px;
} #item2 {
padding-top: 20px;
} #item3 {
padding-top: 15px;
} #item4 {
padding-top: 10px;
} #item5 {
padding-top: 5px;
}
- stretch：沿着交叉轴线拉伸填充整个伸缩容器
.flex-container {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;//此时可以设置宽度，但不能设置高度，否则无法拉伸
background-color: green;
margin: 1px;
}
7、align-content：决定伸缩项目可以换行时沿着交叉轴线的对齐方式，flex-warp:warp一定要开启
- flex-start：与交叉轴线起始位置靠齐
.flex-container {
display: flex;
flex-flow: row wrap;
align-content:flex-start;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
- flex-end：与交叉轴线结束位置靠齐
.flex-container {
display: flex;
flex-flow: row wrap;
align-content:flex-end;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
- center：与主轴线中间位置靠齐
.flex-container {
display: flex;
flex-flow: row wrap;
align-content:center;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
- space-between：平均分配到主轴线里，第一行项目靠齐起始位置，最后一行项目靠齐终点位置
.flex-container {
display: flex;
flex-flow: row wrap;
align-content:space-between;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
- sapce-around：所有行平均分配到主轴线里，两端保留一半的空间
.flex-container {
display: flex;
flex-flow: row wrap;
align-content:space-around;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
}
- stretch：沿着交叉轴
.flex-container {
display: flex;
flex-flow: row wrap;
align-content:stretch;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px; //不要设置高度，不然无法拉伸
background-color: green;
margin: 1px;
}
三、伸缩项目的属性，单个设置排版
1、order：定义伸缩项目的排列顺序。数值越小，排列越靠前，默认值为0。
- 表达式 order: integer;
.flex-container {
display: flex;
flex-flow: row wrap;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
} #item4 {
order: -1;
} #item5 {
order: -2;
}
2、flex-grow：定义伸缩项目的放大比例，默认值为0，表示即使存在剩余空间，也不放大。
- 表达式 flex-grow: number;
.flex-container {
display: flex;
flex-flow: row wrap;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
} #item2 {
flex-grow:; //空间不足，item2不会放大
} #item4 {
flex-grow:; //item4放大填满剩余空间
}
3、flex-shrink：定义伸缩项目的收缩比例，默认值为1。
- 表达式 flex-shrink: numer;
.flex-container {
display: flex;
flex-flow: row nowrap;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
} #item4 {
flex-shrink:; //单行，空间有限，item4缩小为原来的1/3
} #item5 {
flex-shrink:; //单行，空间有限，item5缩小为原来的1/5
}
4、flex-basis：定义伸缩项目的基准值，剩余空间按照比例进行伸缩，默认auto。
- auto
.flex-container {
display: flex;
flex-flow: row wrap;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
} #item5 {
flex-basis:auto;
}
- flex-basis: length
.flex-container {
display: flex;
flex-flow: row wrap;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
} #item5 {
flex-basis:200px;
}
5、flex：是flex-grow、flex-shrink、flex-basis的缩写，默认值 0 1 auto。
- none: 不设置
.flex-container {
display: flex;
flex-flow: row wrap;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
} #item2 {
flex: none; /* 等同于 flex: 0 0 auto */
}
- flex-grow flex-shrink flex-basis: 设置放大或缩小或基准线
.flex-container {
display: flex;
flex-flow: row wrap;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
} #item2 {
flex:; /* 等同于 flex: 1 1 auto 或者 等同于 flex: auto*/
}
6、align-self：用来设置伸缩项目在交叉轴的对齐方式。
- auto：自动对齐
.flex-container {
display: flex;
flex-flow: row wrap;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
} #item3 {
align-self: auto;
}
- flex-start: 向交叉轴的开始位置对齐
.flex-container {
display: flex;
flex-flow: row wrap;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
} #item3 {
align-self: flex-start;
}
- flex-end: 向交叉轴的结束位置对齐
.flex-container {
display: flex;
flex-flow: row wrap;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
} #item3 {
align-self: flex-end;
}
- center: 向交叉轴的中间位置对齐
.flex-container {
display: flex;
flex-flow: row wrap;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
} #item3 {
align-self: center;
}
- baseline:向交叉轴的基准线对齐
.flex-container {
display: flex;
flex-flow: row wrap;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
height: 50px;
background-color: green;
margin: 1px;
} #item1 {
align-self: baseline;
margin-top: 50px;
} #item2 {
align-self: baseline;
}
- stretch: 在交叉轴拉伸填满伸缩容器
.flex-container {
display: flex;
flex-flow: row wrap;
width: 160px;
height: 160px;
background-color: red;
} .flex-item {
width: 50px;
background-color: green;
margin: 1px;
} #item1 {
align-self: stretch;
} #item2 {
align-self: stretch;
} #item3 {
align-self: stretch;
}
CSS：CSS弹性盒子布局 Flexible Box的更多相关文章
- css横向 弹性盒子布局的一些属性
<head> <meta charset="utf-8"> <meta name="viewport" content=" ...
- CSS Flexbox 弹性盒子模型
CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...
- CSS3总结五：弹性盒子(flex)、弹性盒子布局
弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...
- CSS3弹性盒子（Flex Box）
CSS3弹性盒子(Flex Box) 一.容器的属性:flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content 1 ...
- Flex box 弹性盒子布局
display: -webkit-flex 标识使用弹性布局 flex: num 占容器的比例 Flex等比划分 导航1 : Flex :1; 导航2 Flex: 2; ————&g ...
- css position弹性盒子测试
总结: 1.利用样式height:100%设置div高度为全屏时候必须设置所有的父元素,但是父元素那么多,不可控,所以此法不可行: 2.设置父框架的padding为100px,div进行float,p ...
- css FlexBox 弹性盒子常用方法总结
总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ ...
- 【CSS3】 CSS3:弹性盒子（Flex Box）
Flex布局是什么 如何指定一个容器为Flex布局 Flex的基本语法 display flex-direction justify-content align-items flew-wrap ali ...
- 弹性方框模型 (Flexible Box Model) 快速入门
简介 我可以肯定,您对于页面上水平或垂直排列的样式元素已经了解得够多了.但是,CSS 还缺少适用于此任务的合适机制.了解 CSS3 弹性方框模型(简称 Flexbox) 该草案将 Flexbox 描述 ...
随机推荐
- [牛客网NOIP赛前集训营-提高组（第一场）]C.保护
链接:https://www.nowcoder.com/acm/contest/172/C来源:牛客网 题目描述 C国有n个城市,城市间通过一个树形结构形成一个连通图.城市编号为1到n,其中1号城市为 ...
- nginx::配置https/反向代理
vim /etc/nginx/nginx.conf user nginx; worker_processes ; error_log /var/log/nginx/error.log warn; pi ...
- Spring入门(五)：Spring中bean的作用域
1. Spring中bean的多种作用域 在默认情况下,Spring应用上下文中所有的bean都是以单例(singleton)的形式创建的,即不管给定的一个bean被注入到其他bean多少次,每次所注 ...
- RIDE的External Resources
External Resources(外部资源):主要指不在project管辖范围内的资源文件. 通俗来说,如果是目录的project,只要不在自己目录范围内的资源文件都算外部资源:如果是文件的pro ...
- postman使用实例
以下以一个登录接口为例,介绍一下postman是如何发请求的. 先执行Pre-request Scripts(预处理) - body - tests(进行断言) postman中变量的引用: {{}}
- python学习-多线程并发
1.线程与进程 通俗解释: 对于操作系统来说,一个任务就是一个进程(Process),比如打开一个浏览器就是启动一个浏览器进程,打开一个记事本就启动了一个记事本进程,打开两个记事本就启动了两个记事本进 ...
- kmp算法,求重复字符串
public class Demo { public static void main(String[] args) { String s1 = "ADBCFHABESCACDABCDABC ...
- Flask：Flask中使用会话技术
1.会话技术cookie和session (1)cookie 在网站中,HTTP请求是无状态的.也就是说,即使第一次用户访问服务器并登录成功后,第二次请求服务器依然不知道当前发起请求的是哪个用户.co ...
- 使用asp.net core 3.0 搭建智能小车1
跟随.net core 3.0 一起发布的System.Device.Gpio 1.0已经可以让我们用熟悉的C#原汁原味的开发莓派上面的GPIO了.并且在 Iot.Device.Bindings这个包 ...
- python基础-字典dict
字典-dict 用途: 定义方法:通过{} 来存储数据,通过key:value (键值对)来存储数据,每个键值对通过逗号分隔.在键值对中,key 是不可变的数据类型,value 是任意数据类型 def ...