前端CSS3布局display:flex用法

先附上代码

点击查看代码
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>display:flex</title>
<style>
.flex-box {
background-color: aquamarine;
} .flex-box>div {
background-color: lightgray;
width: 100px;
height: 100px;
text-align: center;
border: 1px solid red;
}
</style>
</head> <body>
<div class="flex-box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body> </html>

运行效果

8个小方块呈纵向排列

好,接下来我们看看display:flex到底有哪些好处

先在flex-box中设置display:flex,看看效果

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
}

效果图

仅仅设置了display: flex,8个小方块呈横向排列了

接下来详解flex布局的几个常用属性

  • flex-direction

  • flex-wrap

  • flex-flow

  • justify-content

  • align-items

1. flex-direction

该属性决定小方块按横向或纵向排列

(1):row(决定小方块横向排列,起点在左端)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
flex-direction: row;
}

效果图

可以看到,样式并没有什么变化,这是因为row是flex-direction的默认排列方式

(2):row-reverse(决定小方块横向排列,起点在右端)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
flex-direction: row-reverse;
}

效果图

(3):column(决定小方块纵向排列,起点在上端)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
flex-direction: column;
}

效果图

(4):column-reverse(决定小方块纵向排列,起点在下端)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
flex-direction: column-reverse;
}

效果图

到此,flex-direction属性就讲完了

接下来讲解flex-wrap

2. flex-wrap

该属性决定小方块是否换行,默认不换行,内容会被挤压

(1):nowrap(决定小方块不换行,起点在上端,内容会被挤压)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
flex-wrap: nowrap;
}

效果图

(2):wrap(决定小方块换行,起点在上端,内容不会被挤压,)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
flex-wrap: wrap;
}

效果图

(3):wrap-reverse(决定小方块换行,起点在下端,内容不会被挤压,)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
flex-wrap: wrap-reverse;
}

效果图

3. flex-flow

该属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性

包含如下几种可能

  • row nowrap|wrap|wrap-reverse

  • row-reverse nowrap|wrap|wrap-reverse

  • column nowrap|wrap|wrap-reverse

  • column-reverse nowrap|wrap|wrap-reverse

由于可能太多了,下面只列举了一种,但小编试过了,所有的可能都是对的

(1):row-reverse wrap-reverse(决定小方块呈横向排列且起点在右端,换行且起点在下端,内容不会被挤压)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
flex-flow: row-reverse wrap-reverse;
}

效果图

4. justify-content

该属性决定小方块在纵轴上的对齐方式

(1):flex-start(决定小方块左对齐)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
justify-content: flex-start;
}

效果图

(2):center(决定小方块中心对齐)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
justify-content: center;
}

效果图

(3):flex-end(决定小方块右对齐)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
justify-content: flex-end;
}

效果图

(4):space-around(决定小方块之间的间隔比小方块与边框的间隔大一倍)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
justify-content: space-around;
}

效果图

(5):space-between(决定小方块两端对齐,小方块之间间隔相等)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
justify-content: space-between;
}

效果图

(6):space-evenly(决定小方块之间的间隔相等)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
justify-content: space-evenly;
}

效果图

5. align-items

该属性决定小方块在横轴上的对齐方式

(1):flex-start(决定小方块上对齐)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
align-items: flex-start;
}

效果图

(2):center(决定小方块中心对齐)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
align-items: center;
}

效果图

(3):flex-end(决定小方块下对齐)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
align-items: flex-end;
}

效果图

(4):baseline(决定小方块第一行文字的基线对齐)

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
align-items: baseline;
}

效果图

(5):stretch(决定小方块占满整个容器的高度)

注意:小方块的高度应不设置或设置为auto

上代码

点击查看代码
.flex-box {
background-color: aquamarine;
display: flex;
align-items: stretch;
}

效果图

以上是容器的属性,接下来我们讲解小方块的属性

  • order

  • flex-grow

  • flex-shrink

  • flex-basis

  • flex

  • align-self

(1):order(决定小方块显示的顺序,默认为0)

注意:小方块order不设置或设置为0的优先级比设置为1的优先级高

注意:该值必须为数字

上代码

点击查看代码
<div class="flex-box">
<div style="order: 1">1</div>
<div style="order: 2">2</div>
<div style="order: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

效果图

(2):flex-grow(决定某个小方块相对于其它小方块将增长多少)

注意:该值必须为数字,数值越大,增长越多

上代码

点击查看代码
<div class="flex-box">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 2">2</div>
<div style="flex-grow: 3">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

效果图

将窗口变长

(3):flex-shrink(决定某个小方块相对于其它小方块将收缩多少)

注意:该值必须为数字,数值越大,收缩越多

上代码

点击查看代码
<div class="flex-box">
<div style="flex-shrink: 1">1</div>
<div style="flex-shrink: 2">2</div>
<div style="flex-shrink: 3">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

效果图

将窗口缩小

(4):flex-basis(决定某个小方块的初始长度)

上代码

点击查看代码
<div class="flex-box">
<div style="flex-basis: 60px">1</div>
<div style="flex-basis: 80px">2</div>
<div style="flex-basis: 120px">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

效果图

(5):flex(flex-grow、flex-shrink 和 flex-basis 属性的简写属性)

上代码

点击查看代码
<div class="flex-box">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

效果图

(6):align-self(决定某个小方块的对齐方式,将覆盖容器的 align-items 属性所设置的默认对齐方式)

上代码

点击查看代码
<div class="flex-box">
<div style="align-self: flex-start; height: 60px;">1</div>
<div style="align-self: center; height: 80px;">2</div>
<div style="align-self: flex-end; height: 160px;">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>

效果图

至此,display:flex的常用用法就讲完了

前端CSS3布局display:flex用法的更多相关文章

  1. 前端CSS3布局display:grid用法

    前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...

  2. CSS弹性盒布局(display:flex)

    CSS弹性布局(display:flex) 参考: http://www.runoob.com/w3cnote/flex-grammar.html https://www.jianshu.com/p/ ...

  3. css3 伸缩布局 display:flex等

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 弹性盒布局display:flex详解

    一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...

  5. css3布局属性flex

    html代码如下: <ul class="ul_box"> <li><a href="#">html</a>&l ...

  6. css display:flex 属性

    一:display:flex 布局 display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它 ...

  7. CSS3:布局display属性的flex(弹性布局)

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

  8. 浅谈CSS3中display属性的Flex布局

    浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...

  9. 【分享】谈CSS3中display属性的flex布局

    最近在学习微信小程序(重新学习微信小程序),在设计首页布局的时候,新认识了一种布局方式display:flex .guide-top{ height: 36%; display: flex; /*fl ...

随机推荐

  1. 理解Promise函数中的resolve和reject

    看了promise的用法,一直不明白里面的resolve和reject的用法: 运行了这两段代码之后彻底理解了promise的用法: var p = new Promise(function (res ...

  2. vue解决音频可视化播放,使用wavesurfer.js

    vue解决音频可视化播放,使用wavesurfer.js 上效果:   1.安装wavesurfer  npm install wavesurfer.js 2.在页面导入 import WaveSur ...

  3. tkinter GUI编程

    tkinter编程概述 tkinter模块包含在Python的基本安装包中.使用tkinter模块编写的GUI程序是跨平台的.可在windows.UNIX.Linux以及Macintonsh OS X ...

  4. Spring Boot配置druid监控页功能

    1.导入坐标 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http ...

  5. VirtualBox安装Kali

    VirtualBox安装Kali 下载VBox 去Virtual Box官网下载(根据操作系统选择版本,此处以Windows为例) 打开安装程序进行安装即可 安装Kali 去Kali Linux官网下 ...

  6. 2021.11.14 CF1583E Moment of Bloom(LCA+图上构造)

    2021.11.14 CF1583E Moment of Bloom(LCA+图上构造) https://www.luogu.com.cn/problem/CF1583E 题意: She does h ...

  7. 2021.11.03 P2886 [USACO07NOV]Cow Relays G(矩阵+floyed)

    2021.11.03 P2886 [USACO07NOV]Cow Relays G(矩阵+floyed) [P2886 USACO07NOV]Cow Relays G - 洛谷 | 计算机科学教育新生 ...

  8. Python 爬取1688货源重量,自动发邮件到指定邮箱(qq),设置定时运行程序

    1 # -*- coding: utf-8 -*- 2 # @Time : 2020/7/6 13:46 3 # @Author : Chunfang 4 # @Email : 3470959534@ ...

  9. python跑机器学习时报错:Process finished with exit code -1073740791 (0xC0000409)

    emmm...第二次遇到这个错误了,好好的好好的卷积神经网络突然就跑不起了.就弹出一堆信息也不报那行代码错了... 记录一下: 两次解决方法相同,删h5py包 Process finished wit ...

  10. Java指令重排序在多线程环境下的应对策略

    一.序言 指令重排在单线程环境下有利于提高程序的执行效率,不会对程序产生负面影响:在多线程环境下,指令重排会给程序带来意想不到的错误. 本文对多线程指令重排问题进行复原,并针对指令重排给出相应的解决方 ...