CSS中的flex布局
1、flex 布局的概念
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 inline-flex 使属性值用 Flex 布局。
inline-flex 和 inline-block 一样,对设置了该属性值的元素的子元素来说是个 display:flex 的容器,对外部元素来说是个 inline 的块。
.box{
display: flex;
}
.inlinebox{
display: inline-flex;
}
设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
下面将元素分为容器和子元素,设置了 display 属性的即为容器,容器内部的元素即为子元素也称为项目。
2、容器的属性
设置了 flex 属性的容器可以通过设置其他属性值来设置容器的子元素的排列
以下6个属性可以设置在容器上:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
2.1、flex-direction(设置子元素的排列方向)
flex-direction 属性决定子元素的排列方向
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
<div class="test02">
<div class="children">
<p>1</p>
</div>
<div class="children">
<p>2</p>
</div>
<div class="children">
<p>3</p>
</div>
</div>
.test02 {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
}
.test02 .children{
width: 50px;
height: 50px;
}
row
(默认值):主轴为水平方向,起点在左端;
row-reverse
:主轴为水平方向,起点在右端。
column
:主轴为垂直方向,起点在上沿。
column-reverse
:主轴为垂直方向,起点在下沿。
2.2、flex-wrap属性(设置是否换行)
让弹性盒的子元素在必要的时候拆行,当不设置该属性值的话默认值是不换行的,如果容器装不下子元素的话子元素会进行相应的收缩。有三个属性值:
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap
(默认):不换行。
wrap
:换行,第一行在上方。
wrap-reverse
:换行,第一行在下方。下面分别对应:
2.3、flex-flow 属性(flex-direction和flex-wrap的结合)
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性,默认值为 row nowrap。当然,该属性也可以只设置其中一个属性值。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
2.4、justify-content属性(设置子元素在横轴上的排列)
justify-content 属性定义了子元素在横轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start(默认值):左对齐;
flex-end:右对齐;
center: 居中;
space-between:两端对齐,项目之间的间隔都相等;
space-around:每个子元素之间的间隔相等,且子元素之间的间隔比子元素与父元素的距离大一倍。
2.5、align-items属性(设置子元素在纵轴上的排列)
align-items 属性定义项目在纵轴上是如何排列的
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果子元素未设置高度 height 或设为auto,将占满整个容器的高度。如果子元素设置了宽度,则该属性值无效
2.6、align-content属性(设置每行子元素之间的排列方式)
align-content 属性定义了当有多行子元素时每行子元素之间排列方式,当只有一行子元素时即flex-wrap属性值为no-wrap时,该属性没有效果。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
stretch(默认值):每行子元素默认排列,相当于只设置了lex-wrap:wrap,每行子元素间有一定间隔
flex-start:子元素从纵轴的起点开始排列,且行间没有间距
flex-end:与纵轴的终点对齐,且行间没有间距。
center:与纵轴的中点对齐。
space-between:与纵轴两端对齐,轴线之间的间隔平均分布。
space-around:每行子元素的间隔都相等,且每行子元素之间的间隔比子元素到父元素的距离大一倍。
3、子元素的属性
子元素有以下6个属性:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
3.1、order 属性(设置某个子元素的排列先后顺序)
order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
.item {
order: <integer>;
}
下面我是把第四个子元素的 order 设为了 -1
3.2、flex-grow属性(设置子元素的放大比例,默认为0)
flex-grow
属性定义项目的放大比例,该属性值默认为0
,即即使存在剩余空间,也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
默认值效果:
比如如果所有项目的flex-grow
属性都为1,则如果有剩余空间的话它们将等分剩余空间。如果一个项目的flex-grow
属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。下面是把第一和第三个元素设为1,第二个设为2:
3.3、flex-shrink属性(设置子元素的缩小比例,默认为1)
flex-shrink
属性定义了子元素的缩小比例,默认为1,即默认是如果父元素装不下子元素,如果不换行的话那么子元素都按照一样的比例缩小。该属性取负值无效。
.item {
flex-shrink: <number>; /* default 1 */
}
比如如果所有项目的flex-shrink
属性都为1,当空间不足时,都将等比例缩小。下面是默认情况下,我把三个子元素的宽都设为100,而父元素只有200的宽,此时三个子元素都按照一样的比例缩小:
如果一个项目的flex-shrink
属性为0,其他项目都为1,则空间不足时,前者不缩小。下面我是把第一个子元素的flex-shrink值设为了0,所以它缩小比例为0,即不缩小。
3.4、flex-basis属性(设置子元素理想的宽度)
flex-basis
属性的默认值为auto
,即子元素的本来大小。
该属性跟长度width差不多意义,可以设为一个长度值,定义了子元素初始占据的宽度。该属性是设置子元素在被放进一个flex容器之前的大小,也就是子元素理想或假设的大小,但是flex-basis并不能保证其实际呈现的大小!
但当父元素装不下子元素时,子元素会按照flex-shrink来进行相应比例的缩小,如果没有设置flex-shrink默认情况下每个子元素的压缩率都是一样的。
当父元素有空余空间时,设置了flex-basis的子元素并不会自动扩大,而是保持flex-basis的属性值设置的大小。
具体可参考:https://www.jianshu.com/p/17b1b445ecd4
.item {
flex-basis: <length> | auto; /* default auto */
}
3.5、flex属性(flex-grow、flex-shrink和flex-basis的组合)
flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值:auto
(1 1 auto
) 和 none (0 0 auto
)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
3.6、align-self属性(设置单个子元素的纵轴排列方式)
align-self
属性允许单个项目有与其他项目不一样的纵轴排列方式,可覆盖align-items
属性。
默认值为auto
,即跟父元素设置的 align-items 的值指定的纵轴排列方式一样。
该属性可能取6个值,设置的值可覆盖掉父元素设置的align-items指定的排列方式。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
下面父元素设置的 align-items 值为 flex-end,第二个元素单独设置了 align-self 为center 。
CSS中的flex布局的更多相关文章
- 使用css中的flex布局弹性手风琴效果
不多说,直接上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- CSS中常见的布局
一.css中常见的布局有哪些? (1)两列布局 (2)三列布局 (3)弹性布局 (4)圣杯布局 (5)双飞翼布局 二.具体实现 (1)两列布局 https://www.cnblogs.com/qin ...
- 整理CSS中display flex(布局利器)
关于display:flex布局,有人了解颇深,我也是看着别人的东西学习的. display:flex的布局是什么.基本概念之类的我根本就不了解,只会用.每次看到概念之类的东西,我都是扫一眼就过去. ...
- css中的那些布局
因为最近心血来潮,就总结了一下css中的几种常见的多列布局. 两列自适应布局 两列自适应布局算是css布局里面最基础的一种布局了,不少网站在使用. 这种布局通常是左侧固定,右边自适应,当然也有反过来的 ...
- css相关,flex布局全通!
寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中. 记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文 ...
- 在移动端中的flex布局
flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...
- 在微信小程序中学习flex布局
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就 ...
- CSS 学习笔记 - Flex 布局
传统布局方式的局限性 传统的网页布局方式,采用 display + position + float 的方式来实现.这种方式,无法实现一些复杂的布局,并且在实现某些布局时,会有一些局限性. 比如,最常 ...
- 图文详解前端CSS中的Grid布局,你真的可以5分钟掌握
前言 网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式. 今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式. CSS 第一个Grid布局 首先我们看看 ...
随机推荐
- nginxUbuntu安装Nginx和正确卸载Nginx Nginx相关 与Nginx报错:nginx: [error] invalid PID number "" in "/run/nginx.pid" 解决方法
https://www.cnblogs.com/zhaoyingjie/p/6840616.html https://blog.csdn.net/adley_app/article/details/7 ...
- npm install 安装不成功,提示python2.7
npm install 安装不成功的原因 是因为缺少python的环境 解决方法: 1.去官网下载https://www.python.org/download/releases/2.7/ 2.安装成 ...
- Vagrant 手册之 Vagrantfile - 提示及技巧
原文地址 Vagrantfile 是一种非常灵活的配置格式.语法基于 Ruby,可以用它做很多事情.在本页使用一些提示和技巧时,请注意正确使用它们. 1. 使用循环定义虚拟机 如果你想对多机器应用稍微 ...
- Vue过渡:CSS过渡
一 项目结构 二 App.vue <template> <div id="app"> <transition name="fade" ...
- HTML表格<tr>行距调整
CSS文件中: .myTable tr{ display:block; /*将tr设置为块体元素*/ margin-bottom:5px;}
- linux操作系统的调度策略
linux的进程分为两种 1.实时进程,优先级高,操作系统会优先执行这种进程 2.普通进程,大多数的进程都是这种进程 调度策略 unsigned int policy; 调度策略的定义 #define ...
- [Codeforces 464E] The Classic Problem(可持久化线段树)
[Codeforces 464E] The Classic Problem(可持久化线段树) 题面 给出一个带权无向图,每条边的边权是\(2^{x_i}(x_i<10^5)\),求s到t的最短路 ...
- k8s入门教程
1. k8s概述 Kubernetes(简称K8S) 是Google开源的分布式的容器管理平台,方便我们在服务器集群中管理我们容器化应用. 教程主要介绍怎么使用阿里云容器服务(kubernetes版本 ...
- Fiddler查看IP和响应时间
原文:Fiddler查看IP和响应时间 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/si ...
- jquery实现按键增加删除css属性(hide)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...