弹性盒布局

最新推荐文章于 2023-11-10 16:15:03 发布
最新推荐文章于 2023-11-10 16:15:03 发布
阅读量288 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Start_t/article/details/103359341
版权

弹性盒布局


标准盒模型：box-size:content-box
box-size:content-box
怪异盒模型：box-size:border-box
box-size:border-box

1.主轴横向对齐（设置在父类容器上）justify-content

1.1 justify-content:space-around 分开左右边距对齐

//css样式
.box{
	display:-webkit-flex;
	display:flex;
	width:400px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background:#eee;}
	.box li{margin:5px;width:50px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
	#box1{
		-webkit-justify-content:space-around;
		justify-content:space-around;
	}
//body中
	<h2>justify-content:space-around</h2>
	<ul id="box1" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>

显示如下：
在这里插入图片描述

1.2 justify-content:space-between 分开对齐

//css样式
.box{
	display:-webkit-flex;
	display:flex;
	width:400px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background:#eee;}
	.box li{margin:5px;width:50px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
	#box2{
		-webkit-justify-content:space-between;
		justify-content:space-between;
	}
//body中
	<h2>justify-content:space-between</h2>
	<ul id="box2" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>

显示如下：
在这里插入图片描述

1.3 justify-content:center 居中对齐

//css样式
.box{
	display:-webkit-flex;
	display:flex;
	width:400px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background:#eee;}
	.box li{margin:5px;width:50px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
	#box3{
		-webkit-justify-content:center;
		justify-content:content:center;
	}
//body中
	<h2>justify-content:center</h2>
	<ul id="box3" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>

显示如下：
在这里插入图片描述

1.4 justify-content:flex-end 结束对齐

//css样式
.box{
	display:-webkit-flex;
	display:flex;
	width:400px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background:#eee;}
	.box li{margin:5px;width:50px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
	#box4{
		-webkit-justify-content:flex-end;
		justify-content:content:flex-end;
	}
//body中
	<h2>justify-content:flex-end</h2>
	<ul id="box4" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>

显示如下：
在这里插入图片描述

1.5 justify-content:flex-start 起始对齐

//css样式
.box{
	display:-webkit-flex;
	display:flex;
	width:400px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background:#eee;}
	.box li{margin:5px;width:50px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
	#box5{
		-webkit-justify-content:flex-start;
		justify-content:content:flex-start;
	}
//body中
	<h2>justify-content:flex-start</h2>
	<ul id="box5" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>

显示如下：
在这里插入图片描述

2.主轴纵向对齐（设置在父类容器上）align-content

2.1 align-content:space-around 分开左右边距对齐

//css
	.box{
		display:-webkit-flex;
		display:flex;
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
		width:200px;height:200px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
	.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
	#box1{
		-webkit-align-content:space-around;
		align-content:space-around;
	}
//body中
	<h2>align-content:space-around</h2>
	<ul id="box5" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
		<li>e</li>
		<li>f</li>
	</ul>

显示如下：
在这里插入图片描述

2.2 align-content:space-between 分开对齐

//css
	.box{
		display:-webkit-flex;
		display:flex;
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
		width:200px;height:200px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
	.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
	#box2{
		-webkit-align-content:space-between;
		align-content:space-between;
	}
//body中
	<h2>align-content:space-between</h2>
	<ul id="box2" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
		<li>e</li>
		<li>f</li>
	</ul>

显示如下：
在这里插入图片描述

2.3 align-content:center 居中对齐

注：要配合flex-wrap:wrap一起使用

//css
	.box{
		display:-webkit-flex;
		display:flex;
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
		width:200px;height:200px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
	.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
	#box3{
		-webkit-align-content:center;
		align-content:center;
	}
//body中
	<h2>align-content:center</h2>
	<ul id="box3" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
		<li>e</li>
		<li>f</li>
	</ul>

显示如下：
在这里插入图片描述

2.4 align-content:strecth 上下拉伸对齐

//css
	.box{
		display:-webkit-flex;
		display:flex;
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
		width:200px;height:200px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
	.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
	#box4{
		-webkit-align-content:strecth;
		align-content:strecth;
	}
//body中
	<h2>align-content:strecth</h2>
	<ul id="box4" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
		<li>e</li>
		<li>f</li>
	</ul>

显示如下：
在这里插入图片描述

2.5 align-content:flex-end 结束对齐

//css
	.box{
		display:-webkit-flex;
		display:flex;
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
		width:200px;height:200px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
	.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
	#box5{
		-webkit-align-content:flex-end;
		align-content:flex-end;
	}
//body中
	<h2>align-content:flex-end</h2>
	<ul id="box5" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
		<li>e</li>
		<li>f</li>
	</ul>

显示如下：
在这里插入图片描述

2.6 align-content:flex-start 起始对齐

//css
	.box{
		display:-webkit-flex;
		display:flex;
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
		width:200px;height:200px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
	.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
	#box6{
		-webkit-align-content:flex-start;
		align-content:flex-start;
	}
//body中
	<h2>align-content:flex-start</h2>
	<ul id="box6" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
		<li>e</li>
		<li>f</li>
	</ul>

显示如下：
在这里插入图片描述

3 案例（拓展）侧轴对齐：align-items（设置在父） align-self(设置在子)

3.1flex-start 起始对齐

3.2flex-end 结束对齐

3.3center 居中对齐

3.4baseline 基线对齐

3.5strech 上下拉升对齐

注：align-items基本与align-content差不多就2个参数没有

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>align-self 弹性盒子-侧轴对齐</title>
		<style>
		.box{
			display:-webkit-flex;
			display:flex;
			
			height:100px;margin:0;padding:10px;border-radius:5px;list-style:none;background-color:#eee;}
		.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
		.box li:nth-child(1){
			-webkit-align-self: flex-end;
			align-self: flex-end;
		}
		.box li:nth-child(2){
			-webkit-align-self: center;
			align-self: center;
		}
		.box li:nth-child(3){
			-webkit-align-self: flex-start;
			align-self: flex-start;
		}
		.box li:nth-child(4){
			-webkit-align-self: baseline;
			align-self: baseline;
			padding:20px 10px;
		}
		.box li:nth-child(5){
			-webkit-align-self: baseline;
			align-self: baseline;
		}
		.box li:nth-child(6){
			-webkit-align-self: stretch;
			align-self: stretch;
		}
		.box li:nth-child(7){
			-webkit-align-self: auto;
			align-self: auto;
		}
		</style>
	</head>
	<body>
		<ul id="box" class="box">
			<li>a</li>
			<li>b</li>
			<li>c</li>
			<li>d</li>
			<li>e</li>
			<li>f</li>
			<li>g</li>
		</ul>
	</body>
</html>

结果显示为：
在这里插入图片描述

4.弹性盒流向（设置在父元素上）flex-direction

4.1 flex-direction:row 分横向从左到右（左对齐）

//css
	.box{
		display:-webkit-flex;
		display:flex;
		margin:0;padding:10px;list-style:none;background:#eee;}
	.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
	#box1{
		-webkit-flex-direction:row;
		flex-direction:row;
	}
//body中
	<h2>flex-direction:row</h2>
	<ul id="box1" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>

显示如下：
在这里插入图片描述

4.2 flex-direction:row-reverse 反转横向排列（右对齐）

//css
	.box{
		display:-webkit-flex;
		display:flex;
		margin:0;padding:10px;list-style:none;background:#eee;}
	.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
	#box2{
		-webkit-flex-direction:row-reverse;
		flex-direction:row-reverse;
	}
//body中
	<h2>flex-direction:row-reverse</h2>
	<ul id="box2" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>

显示如下：
在这里插入图片描述

4.3 flex-direction:column 纵向排列

//css
	.box{
		display:-webkit-flex;
		display:flex;
		margin:0;padding:10px;list-style:none;background:#eee;}
	.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
	#box3{
		height:500px;
		-webkit-flex-direction:column;
		flex-direction:column;
	}
//body中
	<h2>flex-direction:column</h2>
	<ul id="box3" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>

显示如下：
在这里插入图片描述

4.4 flex-direction:column-reverse 反转纵向排列

//css
	.box{
		display:-webkit-flex;
		display:flex;
		margin:0;padding:10px;list-style:none;background:#eee;}
	.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
	#box4{
		height:500px;
		-webkit-flex-direction:column-reverse;
		flex-direction:column-reverse;
	}
//body中
	<h2>flex-direction:column-reverse</h2>
	<ul id="box4" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>

显示如下：
在这里插入图片描述

5.伸缩换行（适用于父类容器上）flex-wrap

5.1 flex-wrap：nowrap 当子元素溢出父容器时不换行

//css
	.box{
		display:-webkit-flex;
		display:flex;
		width:220px;margin:0;padding:10px;list-style:none;background-color:#eee;}
	.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
	#box1{
		-webkit-flex-wrap:nowrap ;
		flex-wrap:nowrap ;
	}
//body中
	<h2>flex-wrap:nowrap</h2>
	<ul id="box1" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>

显示如下：
在这里插入图片描述

5.2 flex-wrap：wrap 当子元素溢出父容器时自动换行

//css
	.box{
		display:-webkit-flex;
		display:flex;
		width:220px;margin:0;padding:10px;list-style:none;background-color:#eee;}
	.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
	#box2{
		-webkit-flex-wrap:wrap ;
		flex-wrap:wrap ;
	}
//body中
	<h2>flex-wrap:wrap</h2>
	<ul id="box2" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>

显示如下：
在这里插入图片描述

5.3 flex-wrap：wrap-reverse 反转wrap排列

//css
	.box{
		display:-webkit-flex;
		display:flex;
		width:220px;margin:0;padding:10px;list-style:none;background-color:#eee;}
	.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
	#box3{
		-webkit-flex-wrap:wrap-reverse ;
		flex-wrap:wrap-reverse ;
	}
//body中
	<h2>flex-wrap:wrap-reverse</h2>
	<ul id="box3" class="box">
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ul>

显示如下：
在这里插入图片描述

Start_t
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex弹性盒子布局实例
11-08
3. 弹性项目（Flex Items）：flex容器的子元素，沿主轴排列。 二、Flexbox关键属性 1. `flex-direction`：定义主轴的方向，可设置为`row`（默认，从左到右）、`row-reverse`（从右到左）、`column`（从上到下）或`...
弹性盒模型
weixin_48306060的博客
04-27 93
目录 目的 属性 display:flex / display:inline-flex flex-direction flex-wrap flex-flow justify-content align-items align-content ...
弹性布局（display:flex；）属性详解
qq_45689637的博客
11-02 4532
参考：https://www.cnblogs.com/hellocd/p/10443237.html Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：
Flex弹性盒布局以及JS基础
WJJ_991027gg的博客
08-16 408
以上是我整理的flex弹性盒布局以及js基础知识点
CSS day12 移动端布局练习
qq_34620296的博客
09-13 727
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
js弹性盒子
最新发布
m0_75026936的博客
11-10 60
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
AngularJS 实现弹性盒子布局的方法
10-21
在前端开发中，布局设计是至关重要的，而弹性盒子（Flexbox）布局提供了一种更加灵活、响应式的解决方案。AngularJS作为一个强大的JavaScript框架，也可以很好地与Flexbox结合，实现动态和自适应的页面布局。本文将...
css-弹性盒布局的深度学习
08-01
【CSS 弹性盒布局深度学习】 在网页设计中，CSS 弹性盒布局（Flexbox）是一种现代的布局模式，旨在提供灵活、响应式的页面布局解决方案。自2009年W3C提出以来，它已成为业界首选的布局方式，并被所有主流浏览器广泛...
flex弹性盒布局最后一行左对齐的实现思路
01-19
使用flex布局，如果是九宫格的话正好可以平分，如图 如果是我们只需要八块，如图 但是我们想让最后一块左对齐，依次排列，需要在元素的父级增加伪元素after，如图 <li></li> <li></li> <li></li> <li>...
弹性盒子布局
m0_75021294的博客
03-13 518
flex 它是一种布局方式。 主要目的是通过父盒子控制子盒子如何排列,一定是亲爸爸和亲儿子
JS中数组的方法
Start_t的博客
09-16 413
JS中数组的方法JS中数组的方法写在前面使用方法 JS中数组的方法 写在前面 arr.sort(); 给数组排序，先数字后英文再中文； arr.reverse(); 反转数组元素； arr.join(str); 将数组划分为字符串，数组元素以str分隔（默认是逗号）； arr.concat(arr1,arr2,…,arr3); 合并数组，可以是多个，多个之间用逗号隔开“,”； arr.p...
js中的深浅拷贝
Start_t的博客
12-22 162
js中的深浅拷贝 说到深浅拷贝，我们得先来了解一下栈和堆 每个内存单元中分为两个部分，栈和堆 栈在内存的最底部，类似于一个标记，名字，分类；稳定，不可更改，空间小 堆数据，表示一组数据，可变更，数据量大，和栈一一对应 多个栈可以对应一个堆，反之不行 变量的声明，变量名存在了栈中 变量的赋值，数据存在了堆中 怎么区分深拷贝与浅拷贝，简单点来说，就是如果B复制了A，当修改B时，看A是否会发生...
ul横向排列css_CSS盒模型
weixin_39735012的博客
11-29 273
HTML文档中的每个元素都会被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。由四部分构成：由里到外依次是content(内容)，padding(内边距)，border(边框)，margin(外边距)。content—-padding—-border—-margin1.标准盒模型(W3C)通过CSS设置元素的宽高，width和height指的是content的宽和高。...
css横向排列和弹性盒子布局 display:flex
wulala_SpongeBob的博客
04-07 6917
编写css时，我们经常需要将元素横向排列在一行，通常由以下三种元素可以实现： 1、float ： 可以使用float偏移到一行，如：同时使用float:left即可偏移在同一行的左边，如下： 也可以一个模块使用float:right，一个模块使用float:left使一左一右排列，可以达到我们要求的效果，但是！！！有一个问题--------他们的父级模块会因为子模块的浮动而使主体没有高度。通俗来...
多线程——start()和run()
gxx_csdn的博客
01-05 1万+
继线程的创建和启动，这篇博文主要讨论一下start()和run()这两个方法。 1. run()方法 在线程的创建和启动的总结中有说过：根据java api，Thread类本身也是实现了Runnable接口，有： public class Thread extends Object implements Runnable 现在来看一下Runnable接口，根据java api，Ru
flex 左右布局_弹性盒子Flex
weixin_39630095的博客
11-30 1387
概念n 弹性盒子，是另外一种布局方式，想要让元素变成一个弹性盒子，只需要给元素一个display:flex属性即可，拥有display:flex的元素会变成一个容器，其子元素会变成这个容器中的项目。n Flex兼容性: 在IE上兼容不好，但是在移动端兼容不是问题n 在使用弹性盒子的时候，容器中会存在主轴和副轴（交叉轴），一般情况下，主轴为横轴，副轴为纵轴，但是主轴和副轴可以通过flex-direc...
弹性盒基础
cjhxydream的博客
05-19 268
弹性盒基础弹性盒简介弹性容器的属性flex-grow 伸展系数flex-shrink收缩系数flex-wrap 设置弹性元素在弹性容器中是否自动换行flex-flow 是flex-wrap和flex-direction的简写属性justify-content 分配主轴上的空白空间align-items 元素在辅轴上如何对齐align-content 辅轴空白空间的分布align-self 覆盖当前弹性元素上的align-items弹性元素的属性基础属性：（扩展系数、缩减系数、基础长度）排列顺序 弹性盒
CSS3 弹性盒子(Flex Box)
热门推荐
qq_52301431的博客
04-05 1万+
25、CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒子（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 案例，实现水平垂直居中： 正在上传…重新上传取消 绝对定位与负边距实现 #container{ position:relative; } ..
图解CSS3弹性盒子属性
通俗易懂
04-17 6953
弹性盒子属性 设置弹性盒子：display flex：块级的弹性盒子 inline-flex：行级的弹性盒子 -webkit-flex：苹果和谷歌的兼容性 搞清楚子元素和父元素 设置在父元素上的值 flex-direction：子元素在父容器中的位置（默认row） row：横向从左到右排列(左对齐)，默认排列 row-reverse：横向右对齐元素反转 column：纵向排列 column...
css3弹性盒子布局
08-25
CSS3弹性盒子布局（Flexbox）是一种用于创建灵活的、响应式的网页布局的技术。它通过定义容器和内部元素之间的关系来实现布局。以下是CSS3弹性盒子布局的一些基本概念和属性： 1. 弹性容器（Flex Container）：使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值