为了账号安全,请及时绑定邮箱和手机立即绑定

[前端学习]CSS3部分学习笔记,第三天

标签:
CSS3

伸缩布局

传统布局的局限性

  • 在之前的css中对盒子布局我们使用的浮动定位等方法,固然对大部分布局已经能够胜任,但是一些特殊的布局样式却是力不从心。因此css3中新增了伸缩布局的功能,它能应对较复杂的布局结构,并且对响应式布局支持尤为明显

justify-content

  • 伸缩布局时属性都是设置给多个盒子的父元素,通过父元素来操作子盒子

  • display:flex应用这个属性就将父元素变为了伸缩盒子,而它内部的所有子元素盒子都自动变成了伸缩项。伸缩项不需要浮动和定位,也能在同一行显示或者同一列显示

  • 下面就是伸缩布局最重要的属性:

  • justify-content:flex-start||flex-end||center||space-between||space-around设置所有伸缩项再主轴方向的排列方式,属性值介绍:

    • flex-start从伸缩盒子的开始位置来进行排列布局,简单说就是对齐父盒子的左边按顺序排列

    • flex-end从伸缩盒子的结束位置来进行排列布局,也就是对齐父盒子的右边按顺序排列,注意这个和右浮动不一样,不会改变盒子的顺序,只是相当于把几个伸缩项挪到右边对齐

    • center让所有伸缩项在主轴方向居中对齐排列

    • space-between让第一个和最后一个伸缩项紧贴父盒子左右两边,将剩余空间平均分配为间距然后给中间的几个盒子

    • space-around将剩余空间平均分配,然后放到所有伸缩项的两边作为间距

flex-flow

  • 要明白flex-flow怎么使用,首先得搞清楚flex-wrap和flex-direction这两个属性的作用

  • flex-wrap:norwrap||wrap||wrap-reverse,属性值介绍:

    • norwrap默认值,伸缩项宽度总和大于伸缩盒子的时候不换行,自动平均收缩所有伸缩项,铺满父盒子当前行

    • wrap当伸缩项宽度总和大于伸缩盒子的时候换行,在新的一行再次按照justify-content的方式排列

    • wrap-reverse翻转换行的位置,上下行互换位置

  • flex-direction:row||row-reverse||column||column-reverse,属性值介绍:

    • row默认值,设置主轴为水平方向。这里涉及到一个主轴和侧轴的概念,默认情况下主轴是水平方向轴,侧轴是垂直方向轴。即默认情况下盒子是按主轴方向从左往右排列

    • row-reverse设置盒子主轴水平方向排列并翻转顺序,从右往左排列

    • column设置主轴为垂直方向,就是将侧轴垂直方向设置为了主轴,水平方向成了侧轴。盒子就会按照垂直方向,从上往下排列

    • column-reverse设置主轴垂直方向排列并翻转顺序,从下往上排列

  • 搞清楚这两个属性后,flex-flow就不难理解,它就是这两个属性的综合,它包含上面两个属性的所有属性值

  • flex-flow:norwrap||wrap||wrap-reverse||row||row-reverse||column||column-reverse

    • 比如我想设置垂直方向为主轴,并且换行可以这样写:flex-flow:column wrap;属性值顺序没有限制,它也是写在父元素中

  • 关于主轴和侧轴的概念一定要明白,因为justify-content属性就是根据主轴来设置排列方式的

flex

  • flex属性也是由多个属性组合而成的,分别是flex-grow、flex-shrink、flex-basis

  • flex-grow:number当所有伸缩项宽度总和小于父元素宽度时,将剩余空间按比例分给伸缩项子元素。用来扩展子元素宽度,注意这个属性是写在子元素中的,属性值介绍:

    • 默认值0说明子元素不占据剩余空间,一般写0和1就行了。这个数值其实是一个比例值,比例值的计算方法:当前子元素flex-grow值/所有兄弟子元素flex-grow值总和(包括了自己)

    • 什么意思呢?比如一共3个子元素,给其中一个设置flex-grow:1,其它两个默认为0。那么比例就是1/(1+0+0)=100%,该元素占据所有剩余空间

    • 再比如一共3个子元素,给其中两个设置flex-grow:1,另外一个默认为0,那么比例就是1/(1+1+0)=50%,当前设置了的元素占据剩余空间的50%

  • flex-shrink:number当所有伸缩项大于伸缩盒子的的时候,将多余的宽度按比例来让子元素承担,这个属性也是写在子元素中

    • 默认值为1,说明所有子元素平均承担超出部分的空间。计算比例与前一个相同:当前子元素flex-shrink值/所有兄弟子元素flex-shrink值总和(包括了自己)

    • 但是因为默认值为1的,所以一般设置为0。比如三个子元素默认都是1,平均承担超出的值。你给当前元素设置为0,那么当前元素就不再承担比例值,由另外两个分别承担50%

  • 明白上面两个属性,flex属性也就很好理解了,一般来说很少用flex把上面三个属性的值都写全,大多数情况下就写flex-grow的属性值

  • flex:number如果写一个数值,那么默认就是设置子元素占据剩余空间的比例,根据比例计算公式,可以实现不论多少个项,都能自动平均填满父元素宽度

  • 重点:在案例中发现了一个问题,flex设置的是剩余空间,而不是单纯设置宽度。如果是row为主轴那么剩余空间设置的就是宽,如果column为主轴那么剩余空间设置的就是高。上面的笔记都是默认主轴为水平方向

align-items

  • align-items:flex-start||flex-end||center||stretch||baseline它的作用与justify-content正好相反,设置侧轴方向上的对齐方式,这个属性是设置给父元素

    • flex-start让所有伸缩项在侧轴的开始位置对齐

    • flex-end让所有伸缩项在侧轴的结束位置对齐

    • center让所有伸缩项在侧轴的中间对齐

    • stretch默认值,让所有伸缩项在侧轴方向上拉伸填满,注意如果子元素设置高度,那么此属性无效

    • baseline让所有伸缩项在侧轴方向上,根据文本基线对齐

  • 如果想要给单独某个伸缩项设置侧轴对齐方式,使用align-self属性,写法和属性值都是一样的,只是写在具体子元素中



作者:印象rcj
链接:https://www.jianshu.com/p/2b2eb1714e5b


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消