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

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

admin2个月前 (10-12)技术分享306

 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一样


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

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

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

标签: cssflex
分享给朋友:

相关文章

mysql 数据表中查找重复记录

select [user_name],count(*) as count from [user_table] group by [user_name] having count>1; user_name 要查重复记录的字段u...

超高性比的斐讯盒子T1,刷第三方YYF固件机教程超级详细版

超高性比的斐讯盒子T1,刷第三方YYF固件机教程超级详细版

家里面买了斐讯盒子T1,必不可少的就是刷机,刷机一直爽,一直刷机一直爽,这样的快乐一般人体会不到。原来斐讯盒子N1,T1,还有斐讯K2P路由器也变成了性价比超高的东东,而且众多大神也带来了超多可玩性非常高的固件和破解。楼主今天扒到了相关超高...

安装Windows 10X 教你如何安装Win10X正式版 及下载地址

安装Windows 10X 教你如何安装Win10X正式版 及下载地址

安装Windows 10X 教你如何安装Win10X正式版:Windows 10X是Windows 10操作系统的新版本,主要针对双屏电脑。由于即将运行Windows 10X的双屏电脑(例如即将面世的Surface Neo)的开发遇到挫折,...

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

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

遭遇国外ip抓取或攻击怎么办一招解决禁止海外IP访问

遭遇国外ip抓取或攻击怎么办一招解决禁止海外IP访问

究发现很多网站被攻击都是来自海外的肉鸡,所以禁掉海外IP访问网站也是不错的防护手段,而且国内网站几乎很少有国外用户访问,称之为大局域网也不为过。今天主机吧来教大家如何利用域名解析禁止掉海外IP访问网站。绝大多数域名解析服务商都是提供电信联通...

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

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

发表评论

访客

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