当前位置:首页 > 技术分享 > 正文内容

Flex布局属性详解 左对齐 右对齐

admin2年前 (2023-10-12)技术分享2440

 flex布局利用修改父元素display:flex实现


1 、   flex-direction属性


        取值:row(默认)|| row-reverse || column || column-reverse


        解释:row为横向排列,顺序为1-2-3. row-reverse为横向排列,但顺序为3-2-1. column为纵向排列,顺序为1-2-3. column-reverse为纵向排列,但顺序为3-2-1

<style>
      * {
        margin: 0;
        padding: 0;
      }
      .main {
        width: 900px;
        height: 100px;
        display: flex;
        flex-direction: column-reverse;
      }
      .box1,
      .box2,
      .box3 {
        width: 300px;
        height: 100px;
        text-align: center;
      }
</style>
<body>
    <div class="main">
      <div class="box1" style="background-color: red">1</div>
      <div class="box2" style="background-color: green">2</div>
      <div class="box3" style="background-color: blue">3</div>
    </div>
</body>

2、     flex-wrap属性


取值:nowrap(默认) || wrap || wrap-reverse


解释:nowrap表示不换行,wrap表示换行,wrap-reverse表示换行,第一排紧紧贴在容器底部。


3、     justify-content属性


取值:flex-start(默认)|| flex-end || center || space-between || space-around


解释:表示横轴对齐方式:flex-start表示左对齐,flex-end为右对齐,center居中对齐,space-between表示左右两端对齐,space-around为项目之间间距为左右两侧项目到容器间距的2倍


3、     align-items属性


取值:flex-start || flex-end || center || baseline || stretch(默认)


解释:表示纵轴排列方式:stretch表示不设置高度,占满整个屏幕。flex-start表示纵轴紧贴容器顶部。center表示在纵轴中心排列。flex-end表示紧贴容器底部。baseline表示以第一行文字的基线为参照


4、    align-content属性

表示多行项目的对齐方式,和align-item一样


5、      一行固定个数,超出换行(流式布局)

.father{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.child{
	/* 方法一 */
	flex: 1;
	height: 50px;
	margin: 0 5px 5px 0;
	background-color: #999;
	width: calc((100% - 10px) / 3);// 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
	min-width: calc((100% - 10px) / 3);// 加入min-width、max-width后每个child的宽度就生效了
	max-width: calc((100% - 10px) / 3);
	
	/* 方法二 */
	/* 
		height: 50px;
		margin: 0 5px 5px 0;
		box-sizing: border-box;
		background-color: #999;
		flex: 0 0 calc((100% - 10px) / 3);
	*/
}
.child:nth-child(3n){
	margin-right: 0;// 去除第3n个的margin-right
}


扫描二维码推送至手机访问。

版权声明:本文由小刚刚技术博客发布,如需转载请注明出处。

本文链接:https://blog.bitefu.net/post/550.html

标签: cssflex
分享给朋友:

相关文章

节假日api 负载均衡升级 增加阿里云服务器

2024-8-19 vip服务器遭受攻击 现已经临时更换服务器以下是服务器的情况可根据自己的需求进行选择1.tool.bitefu.net 整合服务器到 新的阿里云服务器(配置更高),旧服务器已不再续费2.vip.bitefu.n...

centos 配置Let's Encrypt 泛域名https证书

centos 配置Let's Encrypt 泛域名https证书

前言2018年1月份Letsencrypt可以申请泛域名证书,这让我们部署多域名、多站点https省了很多功夫,终于可以不用维护多个域名的https证书。笔者以acme.sh为例,手把手教你配置https证书~本教程适用于centos 6....

2021可用的百度网盘高速下载方法分享

2021可用的百度网盘高速下载方法分享

最新可用方法https://blog.bitefu.net/post/163.html方法很简单就是利用网盘直链下载助手【网盘直链下载助手】是一款免费开源获取网盘文件真实下载地址的油猴脚本,基于PCSAPI,支持Windows,Mac,Li...

PHP AES加解密 (ECB模式/sha1prng算法/PKCS5Padding和PKCS7Padding补码) ECB 模式不需求设置 iv

php7+ 版本/**  * [AesSecurity aes加密,支持PHP7+]  * 算法模式:ECB  * 密钥长度:128  * 补...

PHP和Redis实现在高并发下的抢购及秒杀功能

抢购、秒杀是平常很常见的场景,面试的时候面试官也经常会问到,比如问你淘宝中的抢购秒杀是怎么实现的等等。抢购、秒杀实现很简单,但是有些问题需要解决,主要针对两个问题:一、高并发对数据库产生的压力二、竞争状态下如何解决库存的正确减少("...

用CMD命令查询域名的DNS解析记录:A,NS,MX,CNAME,TXT

1、查询域名的A记录nslookup -qt=A bitefu.net当然查询A记录你直接用ping命令来ping域名也可以获得A记录。2、查询域名的NS记录nslookup -qt=NS bitefu.net3、查询域名的MX记录nslo...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。