当前位置:首页 » 《随便一记》 » 正文

web移动端开发-flex布局父项常见属性超详解(附图解)_bbxx_lzx的博客

27 人参与  2022年05月15日 16:49  分类 : 《随便一记》  评论

点击全文阅读


目录

flex布局父项常见属性

一、flex-direction

1.属性

2.演示

flex-direction: row;

flex-direction: row-reverse;

 flex-direction: column;

 flex-direction: column-reverse;

二、justify-content

1.属性

2.演示

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-around;

justify-content: space-between;

三、flex-wrap

1.属性

2.演示

flex-wrap: wrap;

flex-wrap: nowrap;

四、align-content(多行)

1.属性

2.演示

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-around;

align-content: space-between;

align-content: stretch;

五、align-items(单行)

1.属性

2.演示

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: stretch;

六、flex-flow

1.属性

2.演示

flex-flow: column wrap;

总结



flex布局父项常见属性:

flex-direction: 设置主轴方向,先设置谁为主轴,剩下的就是侧轴(主轴水平X轴,侧轴纵向Y轴)

justify-content: 设置主轴上的子元素排列方式

flex-wrap: 设置子元素是否换行

align-content: 设置侧轴上子元素的排列方式(多行)

align-items: 设置侧轴上的子元素排列方式(单行)

flex-flow: 合属性,相当于同时设置了flex-direction 和 flex-wrap


为避免引起歧义,下做演示效果的样式说明:

div {
            /* 给父级添加flex属性*/
            display: flex;
            width: 600px;
            height: 300px;
            background-color: pink;
}
div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
}


一、flex-direction


1.属性

flex-direction: row(默认从左到右)------------重点

flex-direction: row-reverse(从右到左)

flex-direction: column(从上到下)-------------重点

flex-direction: column-reverse(从下到上)


2.演示

演示如下:

flex-direction: row;

 flex-direction: row-reverse;

 flex-direction: column;

 flex-direction: column-reverse;


二、justify-content

1.属性

flex-start(默认从头部开始,根据主轴)---------------重点

flex-end(从尾部开始排列)

center(在主轴居中对齐)----------------------------------重点

space-around(平分剩余空间)---------------------------重点

space-between(先两边贴边,在平分剩余空间)----重点

2.演示

演示如下:

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-around;

justify-content: space-between;


三、flex-wrap

1.属性

nowrap(默认不换行),

wrap(默认换行)-----------重点

2.演示

演示如下:

flex-wrap: wrap;

flex-wrap: nowrap;


四、align-content(多行)

1.属性

flex-start(默认值在侧轴的头部开始排列)---------------------------------------------------重点

flex-end(在侧轴的尾部开始排列)

center(在侧轴中间显示)------------------------------------------------------------------------重点

space-around(子项在侧轴平分剩余空间)--------------------------------------------------重点

space-between(子项在侧轴先分布在两头,然后平分剩下的空间)

stretch(设置子项元素高度平分父元素高度)-----------------------------------------------重点

2.演示

演示如下:

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-around;

align-content: space-between;

align-content: stretch;

 


五、align-items(单行)

1.属性

flex-start(从上到下)------------------------重点

flex-end(从下到上)

center(挤在一起居中,垂直居中)------重点

stretch(拉伸)--------------------------------重点

2.演示

演示如下:

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: stretch;


六、flex-flow

1.属性

相当于同时设置了flex-direction 和 flex-wrap

2.演示

演示如下:

flex-flow: column wrap;

 



总结

1.必须给父项添加 display: flex; 属性

2.flex布局中 ,默认子元素不换行,如果放不下就会无限缩小子元素的宽度,放到父元素里面

3.justify-content: flex-end 要和 flex-direction: row-reverse 区分开(注意图解中子盒子的编号顺序)

4.align-content (多行),不换行默认无效

5.使用 align-items: stretchs 时,子盒子不能给高度


生命不息,学习不止,键盘敲烂,月薪过万!加油,代码人


点击全文阅读


本文链接:http://zhangshiyu.com/post/40196.html

演示  属性  重点  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

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

最新文章

  • 京圈佛子破戒后,我改嫁京圈纨绔(沈墨渊,白晶晶)
  • 前世被闺蜜害死,重生后我让她从太子妃变疯女苏婉儿,清歌完本_前世被闺蜜害死,重生后我让她从太子妃变疯女(苏婉儿,清歌)
  • 全书浏览七零军嫂太彪悍,带三宝上军区离婚(沈清落,陈桂花,陆有为)_七零军嫂太彪悍,带三宝上军区离婚(沈清落,陈桂花,陆有为)全书结局
  • 今天也没变成昨天(周扬陈默)全书免费_(周扬陈默)今天也没变成昨天后续(周扬陈默)
  • 重生后,秦总非要父以子贵(许沐晴,秦越泽)全书浏览_重生后,秦总非要父以子贵全书浏览
  • 他嫌弃我喝两块钱豆浆上不了台面,我结婚后他又哭又闹全书万照,白青青在线
  • 昭然若梦前尘烬列表_昭然若梦前尘烬(温昭然方池雲)
  • 导师借我股票账号,我倒欠五十万(孟潇潇,宁薇)_导师借我股票账号,我倒欠五十万孟潇潇,宁薇
  • 拒绝把外卖券给舍友,竹马送我到迪拜捡垃圾(周钰泽,蒋清清,思源)全书浏览_拒绝把外卖券给舍友,竹马送我到迪拜捡垃圾全书浏览
  • 我的人生,你已出局(程森凌古楚文)_我的人生,你已出局程森凌古楚文
  • 穿书成病娇女配,睁眼就签下离婚协议书(朱楼)_穿书成病娇女配,睁眼就签下离婚协议书
  • 老婆逼我给白月光捐肾,我死后她悔疯了(宋逸晨沈墨白)全书浏览_老婆逼我给白月光捐肾,我死后她悔疯了全书浏览

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1