flex垂直居中_flex 布局例子

最新推荐文章于 2023-10-02 01:59:39 发布
最新推荐文章于 2023-10-02 01:59:39 发布
阅读量84 收藏
点赞数
文章标签： flex垂直居中

398703b37e3f1bb82b859cf2b857502b.png

一般人看不惯教程，教程大多是互相抄的，教程有错漏。

所以这里给出实用的例子，不停完善中（比较简单，感觉不必要了）。

Hello World

<!-- hello world -->
<div style="display: flex;">
	<img src="https://www.zhihu.com/favicon.ico">
	<input type="" name="">
	<button>submit</button>
</div>

576437721c7a00110d0e3177aa54a990.png

会发现高度对齐了，帮了忙。如何我们换成更大的图片，会发现还是对齐。

按比例分配 / 平均分配

<!-- 平均分配 -->
<div style="display: flex;">
	<img src="https://www.zhihu.com/favicon.ico" style="width: 33.333333%;">
	<input type="" name="" style="width: 33.333333%;">
	<button style="width: 33.333333%;">submit</button>
</div>

adc5c400232866df506ff44f53d80279.png

就是通过百分比。

代替 float

<!-- 代替 float -->
<div style="display: flex;">
	<div style="margin-right: 1em;">
		<img src="https://www.zhihu.com/favicon.ico">
	</div>
	<div>
		<div>line 1 ...</div>
		<div>line 2 ...</div>
		<div>line 3 ...</div>
	</div>
</div>

a7ef3e29ffc8b3b0b1865289df7f83ff.png

这里 img 包了一层 div，如果去掉：

<div style="display: flex;">
	<img src="https://www.zhihu.com/favicon.ico" style="margin-right: 1em;">
	<div>
		<div>line 1 ...</div>
		<div>line 2 ...</div>
		<div>line 3 ...</div>
	</div>
</div>

12fc131bfec66e3bc4734fba610dba35.png

意外的高度对齐了，如果需要居中怎么办？

垂直居中（如果不用 flex 实现，相信很多人要到处找例子）

<!-- 垂直居中 -->
<div style="display: flex; align-items: center;">
	<img src="https://www.zhihu.com/favicon.ico" style="margin-right: 1em;">
	<div>
		<div>line 1 ...</div>
		<div>line 2 ...</div>
		<div>line 3 ...</div>
	</div>
</div>

a49dccc234e9f0d206ab3d8ba8ea1048.png

至于div中图片居中这种问题：

<!-- 垂直居中 2 -->
<div style="display: flex; align-items: center; border: 1px solid; width: 200px; height: 200px;">
	<img src="https://www.zhihu.com/favicon.ico">
</div>

3838df8538cc14494cafa3def7fc01fa.png

然后我们想图片水平居中：

<!-- 垂直居中 2 -->
<div style="display: flex; align-items: center; justify-content: center; border: 1px solid; width: 200px; height: 200px;">
	<img src="https://www.zhihu.com/favicon.ico">
</div>

381c763f6cca32a571347b62fdc931e4.png

顶部对齐 / 底部对齐

<!-- 顶部对齐 底部对齐 -->
<div style="display: flex; align-items: flex-start;">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
</div>

042274973798ceb6f26657cd1ca5125b.png 
<!-- 顶部对齐 底部对齐 -->
<div style="display: flex; align-items: flex-end;">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
</div>

f30c83fc93eb804b59243d08612f1e12.png

垂直对齐总结起来就是 align-items 的设置

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

以上已经可以应付一般的需求，以下是更复杂的用法。

换行

<!-- 元素换行 -->
<div style="display: flex; align-items: flex-end;">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
</div>

15a12ae919eb0613b289640a3af7ae93.png

默认是不换行的

<!-- 元素换行 -->
<div style="display: flex; align-items: flex-end; flex-wrap: wrap;">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
</div>

a06ecf82a71e7a76c29012f1180ad37a.png

主要是 flex-wrap 属性

靠左 靠右 水平平均间隔排列

<!-- 水平平均分布 -->
<div style="display: flex; justify-content: space-around;">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
</div>

7718bbb3b4ee453a345cbef2b59b43d5.png 
<!-- 靠右 -->
<div style="display: flex; justify-content: flex-end;">
	<img src="https://www.zhihu.com/favicon.ico">
	<img src="https://www.baidu.com/favicon.ico">
	<img src="https://www.sina.com/favicon.ico">
</div>

457ca162556b864951f307e36b8c6359.png

剩余空间

假如以下代码

<!-- 剩余空间 -->
<div style="display: flex;">
	<img src="https://www.zhihu.com/favicon.ico" style="width: 20%;">
	<div style="border: 1px solid;">
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
	</div>
	<img src="https://www.zhihu.com/favicon.ico" style="width: 20%;">
</div>

d687b2de866d4ec13b7934039e34af93.png

中间 div 会占据剩余空间，还有个 flex-grow 不展开。

同时看到中间 div 空间不足，被缩小了：

空间不足

<!-- 空间不足 -->
<div style="display: flex;">
	<img src="https://www.zhihu.com/favicon.ico" style="width: 20%;">
	<div style="flex-shrink: 0; border: 1px solid;">
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
	</div>
	<img src="https://www.zhihu.com/favicon.ico" style="width: 20%;">
</div>

a1f968f16cc54bb82fe70dc5e819bdcc.png

flex-shrink 设置空间不足的时候怎么处理。默认为1，即如果空间不足，该项目将缩小。

写完文章后发现，没那么复杂，相对于一般的编程知识，这算简单的。

实际需求 - 平均间隔分布与末行

<!-- 平均间隔分布与末行 -->
<div style="display: flex; flex-wrap: wrap; justify-content: space-between;">
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
</div>

c4dcd2af7801614350f3d98a199de6b7.png

我们看到，第二行不好看。

网上有一种解决方法如下：

<style type="text/css">
	.box::after {
		content: "";
		flex: auto;
	}
</style>
<!-- 平均间隔分布与末行 -->
<div class="box" style="display: flex; flex-wrap: wrap; justify-content: space-between;">
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
</div>

7f398e8be41a2875a03045a3695146e3.png

发现第二行和第一行间隔不同了，这个解决方法不好。

另外一种方法是，最后添加看不见的元素，测试如下：

<!-- 平均间隔分布与末行 -->
<div style="display: flex; flex-wrap: wrap; justify-content: space-between;">
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<button>button</button>
		<!-- 足够多的（占据一行 -1个 的） -->
		<button style="visibility: hidden;">button</button>
		<button style="visibility: hidden;">button</button>
		<button style="visibility: hidden;">button</button>
		<button style="visibility: hidden;">button</button>
		<button style="visibility: hidden;">button</button>
		<button style="visibility: hidden;">button</button>
		<button style="visibility: hidden;">button</button>
</div>

7acc5ea5a23e414a6f5e32937a7a76ef.png

现在看起来舒服了 ^^

weixin_39561168
关注
flex布局详解_flex布局中的一些基本概念
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
09-06 601
flex布局的基本概念Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索。我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局CSS Grid Layout，可以同时处理行和列上的布局。什么是Flex布局，Flex是Flexible Box的缩写
使用css中的flex布局实现盒子垂直居中
莉兹Liz的博客
09-03 5585
一、Flex布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 块级元素flex布局： #box{ display: flex; } 行内元素flex布局： #box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀： #box{ display: -webkit-f...
flex布局中某个行内元素居右并垂直居中
Guoye的专栏
04-25 5154
flex布局中某个行内元素居右并垂直居中 首先父盒子设置成display: flex 子元素(行内元素)设flex: 1和text-align: right <div class="flex-box"> <div>1</div> <div>2</div> <div>3</div> ...
flex布局
qq_57950728的博客
08-12 2466
flex布局、主轴、侧轴
常用的几种布局方式---Flex 布局(垂直居中展示）
weixin_64310738的博客
02-14 2万+
常用的几种布局方式---Flex 布局(垂直居中展示）
为什么清除浮动？
hahahaha__init__的博客
09-09 343
因为最大的父元素不方便给高度，子元素不确定多少 所以应该让子元素撑开父元素 但是会使父元素变为0 会影响下一个元素 这时候就需要清除浮动了 因为浮动不占有位置，需要清除浮动，来占位置 ...
两个div水平排列
l_degege的专栏
01-24 1万+
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title...
html flex布局水平居中,CSS3 Flexbox轻松实现元素的水平居中和垂直居中
weixin_33544518的博客
06-10 751
网上有不少关于Flex的教程，对于Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其实这两种叫法都没有错，只是Flexbox旧一点，而Flex是刚出来不久的东西而已，为了方便说明，遇上新技术，下面我就把这种布局叫Flex布局。css元素居中，相信做为前端工程师的你确定会常常用到，无论是在水平方向居中，仍是垂直方向居中，均可在你的职业生涯中徘徊。不过不少时候要实现垂直居中，仍是比较麻烦的...
flex方式布局 单个view水平居中，垂直居中，
fengcai0123的专栏
08-16 981
.cc{ width:100%; height:100%; display:flex; justify-content:center; align-items:center; font-size:35rpx; } <view class="cc"> <span>暂无可用优惠券</span> </view>
Flex弹性盒子布局（flex-grow、flex-shrink、flex-basis）水平垂直居中、align-content、order、align-self
m0_64460142的博客
04-13 3136
1.Flex弹性盒子（flex-grow、flex-shrink、flex-basis） flex-grow：属性规定在相同的容器中，项目相对于其余弹性项目的增长量。 就是否将剩余空间填满，默认值0，不填充。 flex-shrink:属性固定在相同的容器中，项目相对于其余弹性项目的收缩量。 就是是否压缩，默认值1，被压缩，0，不被压缩 flex-basis:属性规定弹性...
H5 中让div水平布局两边对齐的三种实现方法
weixin_52630329的博客
01-25 5130
本文主要介绍了div水平布局两边对齐的三种实现方法，分享给大家，具体如下： 方法一 父容器div使用 position: relative;,子div使用 position:absolute;定位，注意边距问题 html <div class="div-container"> <div class="div1">1</div> <div class="div2">2</div> </div> css /* 方法一 */ div-c
div float style="clear:both"
04-26 374
<div> <div style="float:left">aaaaaaaaaaaaaa</div> <div style="float:left">bbbbbbbbbbbbbb</div>以上这两个div就是横向排列。 <div style="clear:both"></div>这个东西很重要，它...
网页盒子水平布局方式
csdn_491407692的博客
04-25 3770
网页布局，盒子布局的三种方式
DIV排列的问题 - HTML和CSS解决方案
最新发布
TdMaster的博客
10-02 378
在上面的代码中，我们使用了CSS的grid布局。在上面的代码中，我们创建了一个包含三个DIV的容器（class为"container"），并为每个DIV添加了一个共同的class为"box"。在Web开发中，DIV是一个常用的HTML元素，用于创建和组织网页的布局。通过使用HTML和CSS，我们可以控制DIV元素的排列方式，以实现各种布局需求。本文将介绍一些常见的DIV排列问题，并提供相应的HTML和CSS代码解决方案。如果我们希望将多个DIV以网格的形式排列，可以使用CSS的grid布局。
html页面div等分,HTML5使用纯CSS实现“按比例平分”整个垂直空间
weixin_36124208的博客
06-03 997
目录HTML5使用纯CSS实现“按比例平分”整个垂直空间需求需要实现头部固定在"屏幕"上方+中部滚动+底部固定在"屏幕"下方的页面布局样式。可惜上面网址给出的是固定高度的解决方案.不符合要求.要求1. 必须使用纯CSS假如使用JS根据布局动态计算的话,也是可以的.通过获取头部和底部的布局高度,再用屏幕高度减去即可得到中部的高度即可.中部固定高度=屏幕高度 - 头部高度 - 底部高度2. 不能使用T...
在使用flex布局方式让最后一个元素居右（最右边）显示，一层 HTML 结构实现左“右”布局，使用flex实现居中对齐
热门推荐
MFWSCQ的博客
04-11 3万+
我们在布局的时候通常会在导航栏上有居左和居右显示，中间留白，这样页面伸缩的时候不会影响效果。形如下图 以往我们可能更多会使用float浮动布局来实现这种效果，但是flex得到广泛支持以后就可以更方便和快捷的实现这种效果了： 代码如下： <div class="wrap"> <div class="item">标题1</div>...
div的水平排列、垂直排列
weixin_44531304的博客
05-25 2万+
垂直排列 –css– .lay1{ width:200px; height:20px; border:1px solid #FF6699; } .lay2{ width:200px; height:20px; border:1px solid #FF6699; ...
flex 靠左靠右如何布局？
蜗牛小前的博客
12-05 2万+
&lt;div class='footer'&gt; &lt;div&gt;{{item.status}}&lt;/div&gt;//靠左 &lt;i class='el-icon-delete'&gt;&lt;/i&gt;//靠右 &lt;i class='el-icon-edit'&gt;&lt;/i&gt;//靠右 &lt;/div&gt; &lt;s
CSS3 Flex布局示例与display语法差异解析
在给出的代码中，`justify-content: justify`和`align-items: justify`通常用于实现水平和垂直居中，但这些不是标准的值，标准的值应该是`center`。`justify-content`控制沿主轴（默认是水平轴）上的对齐，`align-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值