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

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

admin1年前 (2023-10-12)技术分享1854

 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
分享给朋友:

相关文章

360浏览器如何禁止切换到兼容模式[本地终极办法]

360浏览器如何禁止切换到兼容模式[本地终极办法]

浏览器内核控制标签meta说明背景介绍由于众所周知的原因,国内的主流浏览器都是双核浏览器:基于Webkit的内核用于常用网站的高速浏览,基于IE的内核主要用于部分网银、政府、办公系统等网站的正常使用。以360浏览器为例,我们优先通过Webk...

百度云,天翼云盘解析网页地址 收集分享

百度云解析http://p.106666.xyz/https://pan.kdbaidu.com/https://pan.kdpd.me/https://yun.kdbaidu.com/http://blog.xxatf.top/https...

系统小技巧:微软版“Ghost” Windows FFU 系统安装还原

系统小技巧:微软版“Ghost” Windows FFU 系统安装还原

在日常的维护中,系统的备份和还原是大家经常需要操作的事情。虽然Windows 10已经提供很多的工具,如系统还原、WIM备份/还原,VHD备份等。不过这些工具大多是基于文件的备份/还原。我们以前经常的使用的Ghost则是基于扇区的备份/还原...

VirtualXposed 不支持32位应用 32位无法安装问题解决办法

VirtualXposed 不支持32位应用 32位无法安装问题解决办法

VirtualXposed 是基于VirtualApp 和 epic 在非ROOT环境下运行Xposed模块的实现(支持5.0~10.0)。与 Xposed 相比,目前 VirtualXposed 有...

Nginx服务崩溃自动重启脚本(监控进程服务并自动重启进程服务)脚本

有一台服务器运行着Ngin最近突然有一次崩溃,导致使用方当天无法访问网页端,然后我不得不登录服务器,检查各项服务,发现nginx崩溃了,于是重启Nginx,问题解决。后来为了防止Nginx再发生这种情况给运维带来的运维成本,于是写了一个脚本...

七牛html js上传带进度条源码

七牛html js上传带进度条源码注册链接https://s.qiniu.com/uM7RJv完整代码下载:https://n802.com/f/349707-489018989-c141f6(访问密码:5036)http://www.yi...

发表评论

访客

看不清,换一张

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