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

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

admin6个月前 (10-12)技术分享632

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

相关文章

Chrome 开启自带多线程下载支持 提升下载速度

Chrome 开启自带多线程下载支持 提升下载速度

Chrome 是当前性能最高的浏览器之一,但在下载速度方面,Chrome 可一点都不快。当前 Chrome 的下载仍是单线程机制,速度非常慢。对此,大家不得不使用第三方的下载工具,例如迅雷、IDM 等支持多线程下载的下载软件,来提高下载速度...

thinkphp等框架开发中容易忽略的xss攻击及应对XSS攻击方法

thinkphp等框架开发中容易忽略的xss攻击及应对XSS攻击方法

虽然说现在的web开发框架都是挺成熟的框架,在性能、安全等方面都有比较好的表现,但问题往往出现在业务逻辑上,如上周我再公司发现的一个跨站脚本攻击,(通常公司是这么过滤的,max(0,$_GET[‘a’])、strip_tags($_GET[...

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

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

[Windows] Adobe Flash Player 34.0.0.92及可用版修改方法

[Windows] Adobe Flash Player 34.0.0.92及可用版修改方法

随着 2021 年的到来,Adobe Flash Player 也迎来了告别,Adobe 在 2020 年 12 月 31 日后将不再支持 Flash Player。其实早在 2017 年,Adobe 公司就已宣布,计划在 2020 年底逐...

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

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

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

python调用WinRAR暴力获取压缩密码 用网址做解压密码

原理很简单:python通过调用WinRAR.exe暴力获取压缩密码,要求必须安装WinRAR或者有WinRAR.exe这个文件(单个文件就行)。个人实测zip和rar格式都能用。缺点:费时间,费cpu一、不生成密码本:4位全数字密码:im...

发表评论

访客

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