zoukankan      html  css  js  c++  java
  • 弹性盒子常用属性

    弹性盒子常用属性

    display设置为flex属性

    flex-direction属性:设置子元素的排列方式,同时设置主轴,默认的情况下x轴为主轴

    flex-direction: row | column | row-reverse | column-reverse

    • row:设置子元素为x轴正向排列(默认)此时主轴为x轴,侧轴为y轴
    • row-reverse:设置子元素为x轴从右往左排列 此时主轴为x轴,侧轴为y轴
    • column:设置子元素为y 轴正向排列 ,当设置了这个属性后,主轴变成y轴,侧轴变成x轴
    • column-reverse:设置子元素为y 轴反向排列 ,当设置了这个属性后,主轴变成y轴,侧轴变成x轴
    • 注意:主轴的方向并不是不变的,它是相对于这个属性而变化

    justify-content属性:设置主轴的排列方式,此属性作用于父元素上

    justify-content: center | flex-start | flex-end | space-around | between-around

    • space-around:子元素平均分布于父元素的主轴上
    • between-around:首位两个子元素贴着父元素的边,其余的子元素平均分布

    align-items属性:设置侧轴的排列方式,此属性作用于父元素上

    align-items: center | flex-start | flex-end | space-around | between-around

    • space-around:子元素平均分布于父元素的主轴上
    • between-around:首位两个子元素贴着父元素的边,其余的子元素平均分布

    align-self属性:弹性子元素的属性,用于设置弹性元素自身在侧轴(纵轴)方向上的对齐方式。

    align-content: center | flex-start | flex-end | space-around | between-around

    • space-around:子元素平均分布于父元素的主轴上
    • between-around:首位两个子元素贴着父元素的边,其余的子元素平均分布

    align-self属性:弹性子元素的属性,用于设置弹性元素自身在侧轴(纵轴)方向上的对齐方式。

    align-content: center | flex-start | flex-end | space-around | between-around

    • space-around:子元素平均分布于父元素的主轴上
    • between-around:首位两个子元素贴着父元素的边,其余的子元素平均分布

    flex-wrap属性:当多个子元素的宽超过父元素时,设置是否换行

    flex-wrap: wrap | no-wrap | wrap-reverse(反转)


    可参考网址: http://www.runoob.com/css3/css3-flexbox.html

  • 相关阅读:
    笨方法学python(本文为阅读时从此书摘录的笔记) 第一天
    关于C++中的虚拟继承的一些总结
    用提高效率的暴力法求3000以内的素数
    DAY 155 python中parse模块
    DAY 154 python自带的hmac模块
    DAY 153 Python中使用pymongo操作mongodb
    DAY 152 hmac模块
    DAY 151 parse模块
    DAY 150 setter&getter&@property
    DAY 149 property和setter装饰器
  • 原文地址:https://www.cnblogs.com/leon94/p/6025241.html
Copyright © 2011-2022 走看看