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 描述 ...
随机推荐
- [Luogu2422]良好的感觉
题目描述 kkk做了一个人体感觉分析器.每一天,人都有一个感受值Ai,Ai越大,表示人感觉越舒适.在一段时间[i, j]内,人的舒适程度定义为[i, j]中最不舒服的那一天的感受值 * [i, j]中 ...
- java 线程池那点事儿
1.为什么要用线程池 2.常见线程池以及参数 2.1 创建线程池 2.2 线程池参数 2.3 常见线程池 3.执行流程 4.健康检查 1.为什么要用线程池 线程池提供了一种任务的提交与任务的执行解偶的 ...
- opencv实践::切边
问题描述 真实案例,扫描仪扫描到的法律文件,需要切边,去掉边 缘空白,这样看上去才真实. #include <opencv2/opencv.hpp> #include <iostre ...
- java学习1-初始java程序
# 第一个简单示例 public class Hello { public static void main(String[] args) { System.out.println("Hel ...
- MFC中如何分割CString类型的数据
[才疏学浅,难免有纰漏,若有不正确的地方,欢迎指教] MFC中有一个库函数 Tokenize(); 函数原型:CStringT Tokenize( PCXSTR pszTokens , int& ...
- Joomla3.4.6 RCE漏洞深度分析
笔者<Qftm>原文发布:https://www.freebuf.com/vuls/216512.html *严正声明:本文仅限于技术讨论与分享,严禁用于非法途径 0×00 背景 10月9 ...
- java秀发入门到优雅秃头路线导航【教学视频+博客+书籍整理】
目录 一.Java基础 二.关于JavaWeb基础 三.关于数据库 四.关于ssm框架 五.关于数据结构与算法 六.关于开发工具idea 七.关于项目管理工具Mawen.Git.SVN.Gradle. ...
- 设计模式（四）Factory Method模式
简单来说,用Template Method模式来构建生成实例的工厂,就是Factory Method模式.在这个模式中,父类决定实例的生成方式,但不决定所要生成的具体的类,具体的处理全部交给子类负责. ...
- 游图邦YOTUBANG是如何搭建生态系统的？
现在的我们最关心的一个问题就是任何一个行业,如果没有办法很好的落地,就算描绘的非常美好,那也只是空中楼阁.昙花一现而已,它无法实现长久的一个发展.互联网时代呢,就是一个流量为王的一个时代,谁拥有庞大的 ...
- python的多线程和多进程（一）
在进入主题之前,我们先学习一下并发和并行的概念: --并发:在操作系统中,并发是指一个时间段中有几个程序都处于启动到运行完毕之间,且这几个程序都是在同一个处理机上运行.但任一时刻点上只有一个程序在处理 ...