弹性盒子：diaplay:flex

最新推荐文章于 2023-06-16 14:25:52 发布
最新推荐文章于 2023-06-16 14:25:52 发布
阅读量430 收藏 6
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45725070/article/details/103896916
版权

display:flex 弹性布局

用法：

在父级元素上设置 display:flex

  • 设置排列方向:flex-decrition:columns（垂直）/row(默认：水平)
  • 设置换行：flex-warp:warp/no-warp（默认：不换行）
  • 设置对齐方式
    • 水平：justify-content/justify-items
    • 垂直：align-content(多行)/align-items（单行）

在子元素上设置属性：

  • align-self：自身交叉轴上的对齐方式（如果父级上也设置交叉轴上的对齐方式，就近原则）
  • justify-self：自身主轴上的对齐方式（但是在弹性盒子上不作用，在display:grid上有效果）
  • flex-grow：等分主轴上的间隙
  • flex-shrink：等分多余溢出部分按比重等分缩小
  • flex-basis：效果等同于width ，权重大于width
  • flex :flex-grow flex-shrink flex-basis (简写)

对齐方式常用属性值
- flex-start 从开始的地方水平/垂直对齐 ，默认是左
- flex-end 从结束的地方水平/垂直对齐 ，默认是右
- center 居中
- space-between 水平/垂直方向首尾紧贴父元素，中间间隙等分
- space-around 水平/垂直方向的子元素之间的左右/上下间距相等，相邻元素之间的间距为两倍间距

实例神马搜索布局 —主要是适应移动端

body {
	background-color: #F1F1F3;
}

body,
div,
ul,
li,
span,
a,
i,p{
	padding: 0;
	margin: 0;
}

.main {
	background: #eee;
	overflow: hidden;
	min-width: 320px;
	min-height: 600px;
}

.top {
	width: 100%;
	height: 80px;
	/*父级上设置display：flex*/
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.top a {
	margin-right: 20px;
	margin-top: 20px;
	width: 40px;
	height: 40px;
	background-image: url(../img/navs4.png);
	background-size: 50px;
	background-repeat-x: no-repeat;
	background-position: 0px 34px;
}

.logo {
	margin-top: 20px;
	width: 100%;
	height: 90px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.logo a {
	width: 150px;
	height: 82px;
	background-repeat: no-repeat;
	background-image: url(../img/07.png);
}

.search {
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background-color: #fff;
	border-radius: 5px;
}

.search_logo {
	width: 60px;
	height: 60px;
	background-size: 23px;
	background-repeat: no-repeat;
	background-image: url(../img/06.png);
	background-position: 20px 18px;
	padding-left: 5px;
}

.search textarea {
	flex: 1 1 auto;
	height: 56px;
	color: #222;
	font-size: 25px;
	line-height: 54px;
	border: none;
	outline: none;
	resize: none;
	padding-bottom: 0;
}

.search textarea::-webkit-input-placeholder {
	color: #ccc;
	font-size: 25px;
}

.microphone_img {
	width: 60px;
	height: 60px;
	background-size: 20px;
	background-repeat: no-repeat;
	background-image: url(../img/04.png);
	background-position: 12px 15px;
}

.scan_img {
	width: 60px;
	height: 60px;
	background-size: 23px;
	background-repeat: no-repeat;
	background-image: url(../img/03.png);
	background-position: 12px 18px;
}

nav {
	width: 100%;
	height: 100px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-top: 20px;
}

a {
	text-decoration: none;
}

nav li {
	list-style: none;
}

nav li a {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: #666666;
	width: 100px;
	height: 100px;
}

nav li a span {
	width: 40px;
	height: 40px;
	border-radius: 40%;
	background-image: url(../img/navs4.png);
	background-repeat-x: no-repeat;
	background-size: 46px;
}

nav li:nth-child(1) a span {
	background-position: -3px -96px;
	background-color: #FFA97F;
}

nav li:nth-child(2) a span {
	background-position: -3px -3px;
	background-color: #60D1D1;
}

nav li:nth-child(3) a span {
	background-position: -3px -326px;
	background-color: #56CFDD;
}

nav li:nth-child(4) a span {
	background-position: -3px -279px;
	background-color: #DCAEF3;
}

nav li:nth-child(5) a span {
	background-position: -3px -188px;
	background-color: #7FCEFF;
}

nav li:nth-child(6) a span {
	background-position: -3px 321px;
	background-color: #A4B7C3;
}

.ads {
	margin-top: 40px;
	width: 100%;
	height: 70px;
	background-color: #FFD153;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ads img {
	width: 400px;
	height: 70px;
}

.hotspot {
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hotspot span:nth-child(1) {
	flex: 1 1 auto;
	padding-left: 30px;
	color: #CCCCCC;
	font-size: 20px;
}

.hotspot a {
	width: 50px;
	height: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #CCCCCC;
	font-size: 30px;
	padding-right: 5px;
}

section {
	margin-top: 10px;
	box-shadow: 0 0 2px #ccc;
	background-color: #fff;
}

section ul li {
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	list-style: none;
	padding-top: 10px;
	padding-bottom: 10px;
}

section ul {
	border-bottom: 1px solid #ccc;
}

.sign_num {
	height: 40px;
	width: 40px;
	font-weight: bold;
	color: #999;
	font-size: 20px;
	padding-left: 35px;
	display: flex;
	align-items: center;
}

.text {
	flex: 1 1 auto;
	height: 40px;
	display: flex;
	align-items: center;
}

.hot_new::after {
	content: "新";
	width: 18px;
	height: 18px;
	background: #ff6f3d;
	color: #fff;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	display: block;
}

.num {
	height: 40px;
	color: #aaa;
	font-size: 15px;
	padding-right: 20px;
	align-self: center;
	display: flex;
	align-items: center;
}

.num1 {
	color: #FF3200;
}

.num2 {
	color: #FF7D52;
}

.num3 {
	color: #2D83FF;
}

.search_more {
	width: 100%;
	height: 75px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.search_more a {
	font-size: 22px;
	color: #0033E6;
	display: flex;
	justify-content: center;
	align-items: center;
}

.search_more a i {
	width: 20px;
	height: 20px;
	background-image: url(../img/02.png);
	background-repeat: no-repeat;
	background-size: 11px;
	margin-left: 10px;
}

.content {
	margin-top: 10px;
	background-color: #FFFFFF;
	width: 100%;
}
.content_ul{
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
}
.content_ul li{
	height: 80px;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
.content_ul li a{
	width: 60px;
	height: 40px;
	font-size: 12px;
	padding-top: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	background-image: url(../img/014.png);
	background-repeat-y: no-repeat;
	background-size: 321px;
}
.content_ul li:nth-child(1) a{
	background-position: 0px 0px;
}
.content_ul li:nth-child(2) a{
	background-position: -57px 0px;
}
.content_ul li:nth-child(3) a{
	background-position: -115px 0px;
}
.content_ul li:nth-child(4) a{
	background-position: -172px 0px;
}
.content_ul li:nth-child(5) a{
	background-position: -232px 0px;
}
.foot{
	padding: 10px;
}
.commodity1{
	width: 100%;
	height: 90px;
	display: flex;
	margin-top: 12px;
}
.img{
	width: 90px;
	height: 90px;
	min-width: 90px;
	background-repeat: no-repeat;
	background-size: 90px;
	margin-right: 15px;
}
.img1{
	background-image: url(../img/015.jpg);
}
.img2{
	background-image: url(../img/016.jpg);
}
.img3{
	background-image: url(../img/017.jpg);
}
.aside{
	flex: 1 1 auto;
	height: 90px;
	display: flex;
	flex-direction: column;
}
.p_context{
	display: flex;
	flex: 1 1 auto;
	min-height:22px;
	max-height: 44px;
	font-size: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.place,.price{
	font-size: 16px;
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: rgb(0,0,86);
	/*min-height:22px;*/
}
.price{
	color: #E55555;
}
.place{
	display: flex;
	color: #CCCCCC;
	justify-content: flex-start;
}
.place span:nth-child(1){
	margin-right: 10px;
}
.see_more,.administration{
	width: 100%;
	height: 50px;
	margin-top: 1px;
	display: flex;
	background-color: #fff;
	justify-content: center;
	align-items: center;
}
.see_more a{
	color: #666666;
	height: 50px;
	line-height:50px;
	font-size: 16px;
	padding-right: 24px;
    background-image: url(../img/012.png);
    background-position:100px center;
    background-size: 10px;
	background-repeat: no-repeat;
}
.administration {
	margin-top: 20px;
}
.administration a{
	color: #666666;
	height: 50px;
	line-height:50px;
	font-size: 16px;
	padding-left: 35px;
	background-image: url(../img/01.png);
	background-position: 0px center;
	  background-size: 25px;
	background-repeat: no-repeat;
}
footer{
	width: 100%;
	height: 110px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
footer p{
	display: flex;
	color: #D3D3D3;
}
footer p a:nth-child(1){
	width: 80px;
	height: 30px;
	color: #666666;
	margin-right:10px;
}
footer p a:nth-child(2){
	width: 80px;
	height: 30px;
	color: #D3D3D3;
	margin-left:10px ;
}

		
	

		<div class="main">
			<div class="top"><a></a></div>
			<div class="logo"><a></a></div>
			<div class="search">
				<span class="search_logo"></span>
				<textarea placeholder="请输入要搜索的内容"></textarea>
				<a class="microphone_img"></a>
				<a class="scan_img"></a>
			</div>
			<nav>
					<li>  <a href="#"><span></span>新闻</a></li>
					<li>  <a href="#"><span></span>小说</a></li>
					<li>  <a href="#"><span></span>知医</a></li>
					<li>  <a href="#"><span></span>导航</a></li>
					<li>  <a href="#"><span></span>应用</a></li>
					<li>  <a href="#"><span></span>更多</a></li>
			</nav>
			<div class="ads">
				<img src="img/011.jpg" />
			</div>
			<section>
				<div class="hotspot">
					<span>今日热搜</span>
					<a href="#">...</a>
				</div>
				<ul>
					<li>
						<span class="sign_num num1">1</span>
						<div class="text"></div>
						<span class="num">11111人关注</span>
					</li>
					<li>
						<span class="sign_num num2">2</span>
						<div class="text"></div>
						<span class="num">11110人关注</span>
					</li>
					<li>
						<span class="sign_num num3">3</span>
						<div class="text hot_new"></div>
						<span class="num">1111人关注</span>
					</li>
					<li>
						<span class="sign_num ">4</span>
						<div class="text"></div>
						<span class="num">111人关注</span>
					</li>
					<li>
						<span class="sign_num ">5</span>
						<div class="text"></div>
						<span class="num">11人关注</span>
					</li>
					<li>
						<span class="sign_num ">6</span>
						<div class="text hot_new"></div>
						<span class="num">1人关注</span>
					</li>
				</ul>
				<div class="search_more"><a href="#">查看更多<i></i></a></div>
			</section>
			<div class="content">
				<div class="hotspot">
					<span>神马好东西</span>
					<a href="#">...</a>
				</div>
				
				<ul class="content_ul">
					<li><a href="#" >白菜价</a></li>
					<li><a href="#" >清仓</a></li>
					<li><a href="#" >品牌特惠</a></li>
					<li><a href="#" >优惠价</a></li>
					<li><a href="#" >9.9包邮</a></li>
				</ul>
				<div class="foot">
				<div class="commodity1">
					<div class="img img1"></div>
					<div class="aside">
						<p class="p_context">MECHREVO 机械革命 S1 Pro 14英寸笔记本电脑（i5-8265U、8GB、512GB、MX250） 3799元包邮（前2小时）</p>
						<p class="price">3799元 包邮 前2小时</p>
						<p class="place">
							<span>京东商城</span>
							<span>2019年11月12日</span>
						</p>
					</div>
				</div>
				<div class="commodity1">
					<div class="img img2"></div>
					<div class="aside">
						<p class="p_context">MECHREVO 机械革命 S1 Pro 14英寸笔记本电脑（i5-8265U、8GB、512GB、MX250） 3799元包邮（前2小时）</p>
						<p class="price">3799元 包邮 前2小时</p>
						<p class="place">
							<span>京东商城</span>
							<span>2019年11月12日</span>
						</p>
					</div>
				</div>
				<div class="commodity1">
					<div class="img img3"></div>
					<div class="aside">
						<p class="p_context">MECHREVO 机械革命 S1 Pro 14英寸笔记本电脑（i5-8265U、8GB、512GB、MX250） 3799元包邮（前2小时）</p>
						<p class="price">3799元 包邮 前2小时</p>
						<p class="place">
							<span>京东商城</span>
							<span>2019年11月12日</span>
						</p>
					</div>
					</div>
				</div>
				
			<!--content___end-->
		</div>
		<div class="see_more">
			<a href="#">查看更多优惠</a>
	    </div>
	    <div class="administration">
			<a href="#">管理我的首页</a>
	    </div>
	<!--mian____end-->
	<footer>
		<p><a href="#">触屏版</a>
		<a href="#">极速版</a></p>
		<p>©SM.CN 粤ICP备13072090号-2</p>
	</footer>
		</div>

效果图如下：调节移动端页面的大小，会自适应改变页面的样式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

levi_99
关注
超详细！弹性盒子(display:flex)
weixin_56334307的博客
05-17 186
一般来说我们在css中用到的display大多数都接block(块级元素)、inline-block(行内块元素)、inline(行内元素)，这些在我们所平时需要的大部分地方都很好使，但是在某些地方会具有一定的局限性，让我们很难调样式，那么弹性盒子(弹性布局)就有可能会很好的帮助到你。flex常用版结束，现在是容器超好用之极端版，接下来的这些东西正常使用当然都没问题，但是如果出现父级的宽/高小于子级的宽/高，那又会出现什么情况呢，上代码。默认的flex-grow的值都为0，也就是不允许放大。
弹性盒子布局（display:flex）
m0_46420078的博客
10-22 829
Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式： 在不同方向排列元素 重新排列元素的显示顺序 更改元素的对齐方式 动态地将元素装入容器
Flexbox Froggy通关代码
weixin_46434107的博客
11-03 2358
通关代码在下面 第一关 justify-content: flex-end; 第二关 justify-content: center; 第三关 justify-content:space-around; 第四关 justify-content:space-between; 第五关 align-items:flex-end; 第六关 justify-content:center; align-items:center; 第七关 justify-content:space-around; alig.
diaplay flex 弹性盒 属性布局
秦璐璐的博客帝国
08-27 206
属性值 设置于大盒子上的 flex-direction决定主轴的方向（即项目的排列方向） row（默认）：主轴水平方向，起点在左端； row-reverse：主轴水平方向，起点在右端； column：主轴垂直方向，起点在上边沿； column-reserve：主轴垂直方向，起点在下边沿。 flex-wrap定义换行情况​​​​​​​ nowrap（默认）：不换行；...
弹性布局（display:flex；）属性详解
Cowboy
01-04 182
弹性布局（display:flex;）属性详解 https://segmentfault.com/a/1190000018233450
display flex是什么意思_深入了解 Flex 属性
weixin_42356811的博客
01-19 3277
你有没有想过 CSS 中的 flex属性如何工作？它是 flex-grow，flex-shrink和flex-basis的简写。开发中最常见的写法是flex：1，它表示 flex 项目扩展并填充可用空间。接下来，我们来详细看看它表示是什么意思。flex-grow 属性flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-grow的值只接受一个整数。考...
display:flex属性
热门推荐
weixin_46380993的博客
02-29 5万+
什么是display:flex？（我来自逆战班） Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为flex布局。 1：先来了解一下display:flex 正常情况下 在一个盒子中，放置4个div，设置高度，宽度继承父元素，呈现如图排列方式，当我们给盒子加上display:flex时，再看一下 盒子内的4个div就...
弹性盒子display:flex flex详细举例 超详细！
大超子
06-16 1010
<div class="box"> <!-- flex：等比分成10份 flex:1 就相当于占了10分之一--> <h2>flex：等比分成10份 flex:1 就相当于占了10分之一</h2> <div class="bigbox"> <div class="small4 nick">我是flex:4 </div> <
弹性布局display：flex常用属性
qq_45876651的博客
12-06 1387
弹性盒子定义 Flex是Flexible Box的缩写，意为"弹性布局”，用来为盒状模型提供最大的灵活性。它的作用： 它能够更加高效方便的控制元素的对齐、排列。 可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的控制元素在页面的布局方向。 按照不同于DOM所指定排序方式对屏幕上的元素重新排序。 设置了flex后float就失效了，但是定位仍然可以使用。 注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示..
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
最新发布
肥晨开发的学习之路
06-16 13万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
flex属性总结
weixin_43723064的博客
12-14 1676
一.父元素属性 1.display:flex;（定义了一个flex容器） 2. flex-direction（决定主轴的方向） row（默认值，水平从左到右）colunm（垂直从上到下）row-reverse（水平从右到左）column-reverse（垂直从下到上） 3. flex-wrap（定义如何换行） nowrap（默认值，不换行）wrap（换行）wrap-reverse（换行，且颠倒行顺...
dislpay:flex布局
A82621235的博客
05-18 217
1、两栏布局：左侧定宽右侧自适应 <div class="main"> <div class="left"></div> <div class="right"></div> </div> .main{ display: fl...
flex布局之flex-direction
qq_48491815的博客
07-07 4万+
flex布局之flex-direction
页面布局-----display:flex详解
weixin_46585382的博客
10-14 4万+
页面布局-----display:flex详解。
掌握flex弹性布局
追上昨天的自己
07-23 177
flex布局是css3中一个非常好用的布局方式，它的主要思想是给容器盒子控制内部元素高度和宽度的能力，flex弹性盒子用来方便定义内部元素的排列规则和布局 flex常用属性的使用: 使用flex首先需要将父元素的display显示模式设置为flex给父元素控制内部元素的能力 <style> section{ width: 900px; ...
flex-direction容器属性
巧克力很苦的小博客
05-02 1万+
flex-direction容器属性 flex-direction属性决定主轴的方向（即项目的排列方向）。 .container { flex-direction: row | row-reverse | column | column-reverse; } 这将建立主轴，从而定义Flex项目放置在Flex容器中的方向。Flexbox（除了可选包装）是单向布局概念。将flex项目视为主要布...
display-flex详解
~★sunshine☆的博客专栏
04-16 9万+
https://blog.csdn.net/dxnn520/article/details/79342637display flex是什么？微信小程序最近火的不要不要的，下载开发工具测试了一下，小程序对css支持很好， 布局使用display flex布局火力强大，不太了解或者对flex布局比较生疏的童靴分享一下display flex部分知识display flex是将对象作为弹性伸缩盒显示。（...
什么是弹性（display: flex）布局 ？
weixin_41044151的博客
02-25 11万+
display:flex 意思是弹性布局，它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 它可以用于以下四个方面： 1、在不同方向排列元素 2、重新排列元素的显示顺序 3、更改元素的对齐方式 4、动态地将
display: flex自我理解
yang792508465的博客
04-18 1万+
我眼中的弹性盒子 display: flex意思是弹性布局，弹性布局简直不要太好用，今天就来和大家具体讲讲它的属性和用法吧。 flex的属性（以下五个属性语法都是加在父元素身上的。） 一 1. flex-direction: row; 布局的排列方向 （主轴排列方向） row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。 row-reverse 显示为行。但方向和row属性值是反的，在水平方向上为从右往左。 column 显示为列 方向为在垂直方向上从上到下 column-rever
Flex布局详解：掌握弹性盒子语法
8. **flex属性**：用于控制项目的弹性，可以设置为一个简写的三部分值，例如`flex: 1 1 auto`，分别代表`flex-grow`（放大比例，默认0）、`flex-shrink`（缩小比例，默认1）和`flex-basis`（初始大小，默认auto）。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值