flex弹性盒布局

最新推荐文章于 2023-02-27 15:40:48 发布
最新推荐文章于 2023-02-27 15:40:48 发布
阅读量1.1k 收藏 2
点赞数 3
分类专栏： css 文章标签： css flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mevicky/article/details/48807533
版权

弹性盒布局是一个用于页面布局的全新CSS3模块功能。弹性盒布局的定义中，它可以自动调整子元素的宽和高，来很好的填充任何显示设备中的可用显示空间，收缩内容防止内容溢出。
和块级元素基于垂直方向布局以及行内元素基于水平方向布局不同，弹性盒布局的算法是方向无关的。
最基本的用法如下：

div {
  border:1px solid black;
}
#box1 {
  display:flex;
  width:120px;
  height:120px;
}

<!--flex用法-->
<div id="box1"></div>

只需要将父元素的display属性设置为flex，其所有子元素都会变成弹性伸缩项目。
下面我们分别介绍flex的父元素的属性。

flex-direction

该属性决定子元素排列的方向。
其可以设置的属性值如下：
row | row-reverse | column | column-reverse
分别对应：
row（默认值）：主轴在水平方向，起点在左端
row-reverse：主轴在水平方向，起点在右端
column：主轴在垂直方向，起点在上沿
column-reverse：主轴在垂直方向，起点在下沿

实例如下：

<!--flex-direction用法-->
<div id="box2">
  <div id="box2-1">1</div>
  <div id="box2-2">2</div>
  <div id="box2-3">3</div>
</div>
<div id="box3">
  <div id="box3-1">1</div>
  <div id="box3-2">2</div>
  <div id="box3-3">3</div>
</div>
<div id="box4">
  <div id="box4-1">1</div>
  <div id="box4-2">2</div>
  <div id="box4-3">3</div>
</div>
<div id="box5">
  <div id="box5-1">1</div>
  <div id="box5-2">2</div>
  <div id="box5-3">3</div>
</div>

#box2 {
  display:flex;
  flex-direction:row;/*主轴为水平方向，起点在左端1,2,3*/  
}
#box2 div {
  width:40px;
  height:40px;
  border:1px solid black;
}
#box3 {
  display:flex;
  flex-direction:row-reverse;/*主轴为水平方向，起点在右端3,2,1*/  
}
#box3 div {
  width:40px;
  height:40px;
  border:1px solid black;
}
#box4 {
  display:flex;
  flex-direction:column;/*主轴为垂直方向，起点在上端1,2,3*/  
}
#box4 div {
  width:40px;
  height:40px;
  border:1px solid black;
}
#box5 {
  display:flex;
  flex-direction:column-reverse;/*主轴为垂直方向，起点在下端3,2,1*/  
}
#box5 div {
  width:40px;
  height:40px;
  border:1px solid black;
}

效果如下：
这里写图片描述

flex-wrap

该属性决定如果一行放不下后，该如何换行。

其可以设置的属性值如下：
nowrap | wrap | wrap-reverse
分别对应：
nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

实例如下：

<!--flex-wrap用法-->
<div id="clear"></div>
<div id="box6">
  <div id="box6-1">1</div>
  <div id="box6-2">2</div>
  <div id="box6-3">3</div>
  <div id="box6-4">4</div>
  <div id="box6-5">5</div>
  <div id="box6-6">6</div>
</div>
<div id="clear"></div>
<div id="box7">
  <div id="box7-1">1</div>
  <div id="box7-2">2</div>
  <div id="box7-3">3</div>
  <div id="box7-4">4</div>
  <div id="box7-5">5</div>
  <div id="box7-6">6</div>
</div>
<div id="clear"></div>
<div id="box8">
  <div id="box8-1">1</div>
  <div id="box8-2">2</div>
  <div id="box8-3">3</div>
  <div id="box8-4">4</div>
  <div id="box8-5">5</div>
  <div id="box8-6">6</div>
</div>

#box6 {
  display:flex; 
  flex-wrap:nowrap;/*不换行,即使超出范围*/
}
#box6 div {
  width:300px;
  height:40px;
  border:1px solid black;
}
#box7 {
  display:flex; 
  flex-wrap:wrap;/*换行,第一行是上方*/
}
#box7 div {
  width:300px;
  height:40px;
  border:1px solid black;
}
#box8 {
  display:flex; 
  flex-wrap:wrap-reverse;/*换行,第一行在下方*/
}
#box8 div {
  width:300px;
  height:40px;
  border:1px solid black;
}

效果如下：
这里写图片描述

justify-content

该属性定义了子元素在主轴上的对齐方式，非常关键。

取值范围：
flex-start | flex-end | center | space-between | space-around

分别对应：
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

实例如下：

<!--justify-content用法-->
<div id="clear"></div>
<div id="box9">
  <div id="box9-1"></div>
  <div id="box9-2"></div>
  <div id="box9-3"></div>
</div>
<div id="box10">
  <div id="box10-1"></div>
  <div id="box10-2"></div>
  <div id="box10-3"></div>
</div>
<div id="box11">
  <div id="box11-1"></div>
  <div id="box11-2"></div>
  <div id="box11-3"></div>
</div>
<div id="box12">
  <div id="box12-1"></div>
  <div id="box12-2"></div>
  <div id="box12-3"></div>
</div>
<div id="box13">
  <div id="box13-1"></div>
  <div id="box13-2"></div>
  <div id="box13-3"></div>
</div>

#box9 {
  display:flex; 
  justify-content:flex-start;/*左对齐*/
  background-color:blue;
}
#box9 div {
  background-color:red;
  margin:20px;
  width:40px;
  height:40px;
  border:1px solid black;
}
#box10 {
  display:flex; 
  justify-content:flex-end;/*右对齐*/
  background-color:blue;
}
#box10 div {
  background-color:red;
  margin:20px;
  width:40px;
  height:40px;
  border:1px solid black;
}
#box11 {
  display:flex; 
  justify-content:center;/*居中*/
  background-color:blue;
}
#box11 div {
  background-color:red;
  margin:20px;
  width:40px;
  height:40px;
  border:1px solid black;
}
#box12 {
  display:flex; 
  justify-content:space-between;/*两端对齐，项目之间的间隔都相等*/
  background-color:blue;
}
#box12 div {
  background-color:red;
  margin:20px;
  width:40px;
  height:40px;
  border:1px solid black;
}
#box13 {
  display:flex; 
  justify-content:space-around;/*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍*/
  background-color:blue;
}
#box13 div {
  background-color:red;
  margin:20px;
  width:40px;
  height:40px;
  border:1px solid black;
}

效果如下：
这里写图片描述

align-items

该属性定义子元素在垂直方向如何对齐

取值范围：
flex-start | flex-end | center | baseline | stretch

分别对应：
flex-start：垂直方向的起点对齐。
flex-end：垂直方向的终点对齐。
center：垂直方向的中点对齐。
baseline: 第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

实例如下：

<!--align-items用法-->
<div id="clear"></div>
<div id="box14">
  <div class="items1" id="box14-1"></div>
  <div class="items2" id="box14-2"></div>
  <div class="items3" id="box14-3"></div>
</div>
<div id="clear"></div>
<div id="box15">
  <div class="items1" id="box15-1"></div>
  <div class="items2" id="box15-2"></div>
  <div class="items3" id="box15-3"></div>
</div>
<div id="clear"></div>
<div id="box16">
  <div class="items1" id="box16-1"></div>
  <div class="items2" id="box16-2"></div>
  <div class="items3" id="box16-3"></div>
</div>
<div id="clear"></div>
<div id="box17">
  <div class="items1" id="box17-1">1</div>
  <div class="items2" id="box17-2">2</div>
  <div class="items3" id="box17-3">3</div>
</div>
<div id="clear"></div>
<div id="box18">
  <div class="items1" id="box18-1"></div>
  <div class="items2" id="box18-2"></div>
  <div class="items3" id="box18-3"></div>
</div>

.items1 {
  background-color:red;
  width:40px;
  height:40px;
  border:1px solid black;
}
.items2 {
  background-color:red;
  width:40px;
  height:140px;
  border:1px solid black;
}
.items3 {
  background-color:red;
  width:40px;
  height:80px;
  border:1px solid black;
}
#box14 {
  display:flex; 
  align-items:flex-start;/*垂直方向的起点对齐*/
  background-color:blue;
}
#box15 {
  display:flex; 
  align-items:flex-end;/*垂直方向的终点对齐*/
  background-color:blue;
}
#box16 {
  display:flex; 
  align-items:center;/*垂直方向的中点对齐*/
  background-color:blue;
}
#box17 {
  display:flex; 
  align-items:baseline;/*第一行文字的基线对齐*/
  background-color:blue;
}
#box18 {
  display:flex; 
  align-items:stretch;/*如果子元素未设置高度或设为auto，将占满整个容器的高度*/
  background-color:blue;
}

效果如下：

这里写图片描述

下面我们来介绍flex的子元素的属性。

order

该属性定义子元素的排列属性，数值越小，排列越靠前，默认为0.

实例如下：

<!--order用法-->
<div id="clear">order用法</div>
<div id="box19">
  <div id="box19-1">-3</div>
  <div id="box19-2">5</div>
  <div id="box19-3">0(默认)</div>
</div>

#box19 {
  display:flex; 
  background-color:blue;
}
#box19 div {
  background-color:red;
  width:40px;
  height:40px;
  border:1px solid black;
}
#box19-1 {
  order:-3;
}
#box19-2 {
  order:5;
}

效果如下：
这里写图片描述

flex

该属性定义子元素的比例。
实例如下：

<!--flex用法-->
<div id="clear">flex用法</div>
<div id="box20">
  <div id="box20-1"></div>
  <div id="box20-2"></div>
  <div id="box20-3"></div>
</div>

#box20 {
  display:flex; 
  background-color:blue;
}
#box20 div {
  background-color:red;
  width:40px;
  height:40px;
  border:1px solid black;
}
#box20-1 {
  flex:1;
}
#box20-2 {
  flex:2;
}
#box20-3 {
  flex:1;
}

效果如下：
这里写图片描述

这里的flex还可以和固定宽度配合使用得到更加复杂的布局。
整个flex布局demo地址：demo

布瑞泽的童话
关注
专栏目录
flex弹性盒子布局实例
11-08
3. 弹性项目（Flex Items）：flex容器的子元素，沿主轴排列。 二、Flexbox关键属性 1. `flex-direction`：定义主轴的方向，可设置为`row`（默认，从左到右）、`row-reverse`（从右到左）、`column`（从上到下）或`...
Adela2012#blog#flex 弹性盒布局1
07-25
2. flex 弹性盒布局将图片1写成图片2在上述HTML代码上加上css。
CSS3 flexbox弹性布局实例
weixin_30778805的博客
02-05 108
我认为当flexbox支持所有的浏览器时，由于它比浮动布局更加的简单和强大性，它将彻底的改变我们的CSS布局方式。例如我们可以很容易的写出一个元素在未知比例下的居中对齐布局。当然css3新增的其它属性，例如grid也可以给前端开发带来更多的布局方式。 下面给出一些例子来证明为什么web开发者应该使用flexbox布局。 在前面的文章里面：flexbox基础教程，flexbox完整版教程。我...
flex 弹性盒子模型一些案例.html
weixin_33834137的博客
09-06 125
Flexbox是布局模块，而不是一个简单的属性，它包含父元素和子元素的属性。 Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。 自适应导航 <ul class="navigation"> <li><a href="#">首页</a></li> <li><a href="#"&g...
flex弹性盒子的例子描述
weixin_43617206的博客
02-29 300
简要理论陈述 1、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器（其中包括行内inline-flex）都可以指定为Flex布局。 2、采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 3、容器默认存在两根轴：水平的主...
css3关于flex弹性盒子最新语法及案例
qq_30486009的博客
11-12 656
1.前言CSS3中引入的布局模式Flexbox布局，主要是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（适配所有类型的现实设备和屏幕大小）。 Flexbox布局功能主要有以下几点：屏幕和浏览器窗口大小改变时可以灵活调整布局 指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），来调整项目大小。（注意，额外空间的概念要理清楚！） 指定伸缩项目沿着
flex弹性盒子布局
weixin_45249263的博客
02-13 1万+
flex是flexible box 的缩写，即为“弹性布局”，用来为盒子模型提供最大的灵活性，任何容器都可以指定为flex布局；
Flex弹性盒布局
sl105105的博客
06-10 544
容器属性小结 flex-flow flex-direction flex-wrap justify-content align-items align-content 利用justify-content、align-items两个属性可以比较简单的解决传统布局中垂直居中对齐的难题
flex弹性盒布局详细讲解
三季人的博客
11-06 1853
flex弹性盒布局一.如何将一个容器设置为弹性容器二.设置弹性容器中弹性元素的排列方式flex-deretion属性三.设置弹性元素的换行四.主轴与垂轴1.概念2.flex-deretion和flex-wrap对主轴和垂轴方向的影响五.主轴与垂轴上的对齐方式justify-content属性align-items属性align-content属性align-selforder属性六.“弹性”flex-shrink属性flex-grow属性flex-basis属性flex属性 一.如何将一个容器设置为弹性容器
Flex 弹性盒子布局
zjw_python的博客
06-01 6549
CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。 基本概念 采用Flex布局的元素，称为Flex容器（container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（item），简称”...
css样式之flex弹性盒布局
最新发布
m0_72642533的博客
02-27 815
要使用flex布局，任何一个容器都可以指定成为Flex布局，但是在设为Flex布局后,其子元素的float(浮动)、clear(规定元素哪一侧不允许浮动)和vertical-align(元素垂直对齐方式)属性将失效。5个值：flex-start、flex-end、center、space-around、space-between
flex弹性盒子布局（详细）
互联网小队
09-30 7658
弹性盒模型 1、伸缩容器display Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素 自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 主轴的开 始位置（与边框的交叉点）叫做 m
flex弹性盒布局最后一行左对齐的实现思路
01-19
使用flex布局，如果是九宫格的话正好可以平分，如图 如果是我们只需要八块，如图 但是我们想让最后一块左对齐，依次排列，需要在元素的父级增加伪元素after，如图 <li></li> <li></li> <li></li> <li>...
浅谈BFC和IFC
热门推荐
brizer的博客
07-22 1万+
先说说FC，FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC和IFC都是常见的FC。分别叫做Block Fomatting Context 和Inline Formatting Context。 BFC BFC（Block Formatti
简述浏览器渲染机制
brizer的博客
01-16 6220
这次简单聊聊我对浏览器的渲染机制的理解。首先需要提到几个基本概念： DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。 CSSOM：CSS Object Model，浏览器将CSS解析成树形的数据结构，简称CSSOM。 Render Tree: DOM和CSSOM合并后生成Render Tree，如下图：Layout: 计算出Render T
javascript延迟加载图片
brizer的博客
10-24 2250
今天讲一下如何通过javascript来延迟加载图片。当一个网页中含有大量图片时，如果一开始就将图片全部加载完毕，势必会引起性能和效率上的问题，用户可能会由于等待时间过久而离开。这个时候，我们需要利用懒加载，也就是延迟加载图片的方式，来提高网站的亲和力。基本思路如下: 给需要延迟加载的图片设置自定义属性比如lazy-src，存在图片源所在路径。然后将所有需要懒加载的图片放入一个数组，在window
纯CSS实现图片
brizer的博客
06-12 2229
在Web开发中，通过CSS代码也可以实现一些简单的图片，当然，如果你有耐心，也可以实现较为复杂的图片噢。 那么请问为什么有图片不去用而需要用CSS来实现呢？一是因为性能的原因，图片带给服务器和客户端的压力比几行CSS代码要大得多；二是因为没有必要，有些简单的效果利用CSS就可以直接完成了，为什么还需要麻烦地引入图片呢？ 比如大名鼎鼎的bootstrap中选择列表的下三角就是通过css实现的。效
CSS两列布局
brizer的博客
06-01 1810
在布局中，我们常常需要出现两列的情况，其中左边一列固定宽度，右边一列随着浏览器宽度变化而变化。如何实现呢？ 传统的方法是利用float将左部分浮动起来，再通过margin将右部分右移，得到所需效果，代码如下： css代码如下： .color-blue { color:blue; } .color-yellow { color:yellow; } .background
CSS3动画
brizer的博客
10-18 1781
本文就自己的理解和使用，介绍CSS3中的动画部分。 CSS3可以自定义动画来取代传统的脚本实现动画。使用CSS动画有三个主要优点： 1. 学习成本低，不需要了解javascript就能够创建动画。 2. 运行效果好，浏览器的渲染引擎会在低性能机器上采用不同方法来保证动画表现，而使用javascript来实现动画，需要非常完美的设计。 3. 让浏览器来控制动画序列，运行浏览器优化动画。比如降低
深入剖析CSS弹性盒模型Flex布局
CSS 弹性盒模型（flex）是一种新的布局模型，引入于 CSS3 中，提供了一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕。flex 是 flexible box 的缩写，通常称之为弹性盒模型。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值