盒模型

盒模型
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码  

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说盒模型,希望能够帮助大家进步!!!

display: flex; 把容器设置为弹性盒模型

(设置为弹性盒模型之后,浮动,定位将不会有效果)

给父元素设置的属性:

          (1)display:flex---把容器设置为弹性盒模型。

          (2)flex-direction---设置弹性盒模型主轴方向

              默认情况下主轴(水平方向从左到右),侧轴就是垂直方向

              取值:

                 1)row---从左到右(默认值),侧轴就是垂直方向

                 2)row-reverse ---- 从右到左,侧轴就是垂直方向

                 3)column---从上到下,侧轴为水平方向

                 4)column-reverse---从下到上,侧轴就是水平方向

         (3)justify-content--设置主轴的对齐方式

              取值:

                1)center---居中对齐

                2)flex-start---主轴的起点对齐

                3)flex-end--主轴的末端对齐

                4)space-between--两端对齐,把多余的空白平分到子元素与子元素之间

                5)space-around--把多余的空白处平分到元素的两侧

         (4)align-items---侧轴的对齐方式(侧轴存在单行的情况)  

              取值:

                1)center--居中对齐

                2)flex-start--侧轴的起点对齐

                3)flex-end--侧轴的末端对齐

         (补充)默认情况下主轴从左到右(主轴的起点是左边,末端是右边)

                 flex-direction: row-reverse;得到一个主轴从右到左(主轴的起点是右边,末端是左边)

                  flex-direction: row-reverse;

                  justify-content: space-around;

                  align-items: flex-start;

          弹性盒的子元素默认情况下是不换行,所有元素在同一行显示

          (5)flex-wrap--设置是否换行

              取值:

                1)wrap---换行

                2)nowrap--不换行(默认值)

                3)wrap-reverse---反转换行

           (6)align-content--侧轴存在多行的情况下的对齐方式

              取值:

                1)center---居中对齐,行与行之间没有间距

                2)flex-start--侧轴的的起点对齐,行与行之间没有间距

                3)flex-end---侧轴的的末端对齐,行与行之间没有间距

                4)space-between--两端对齐,把多余的空间平分打破行与行之间

                5)space-around---把多余的空间平分到行的两侧

 

 

 

给子元素设置的属性:

          (1)align-self---设置单个子元素在侧轴的对齐方式

            取值:

              1)flex-start---侧轴的起点对齐

              2)flex-end---侧轴的末端对齐

              3)center---居中对齐

              4)auto--具体笔记在下一个文件

              5)stretch--拉伸,子元素有固定的值的时候,将不会被拉伸开

          (2)order--设置子元素排列的优先级

                取值:number ,默认的number为0,值越大越排在后面

          (3)flex-grow---设置子元素的放大比例

                取值:number(没有单位),默认值为0,不放大

                比如:子元素的flex-grow的值总和为4,将剩余的空间平分为4分, flex-grow: 1表示占1/4,flex-grow: 3表示占3/4

          (4)flex-shrink---设置子元素缩小比例

            取值:number(没有单位),默认值为1,当容器空间不足的情况下,所有自元素默认缩小

            不想是子元素缩小,那么设置flex-shrink:0

          (5)flex-basis--设置子项目在主轴上的所占空间

            相当于width,设置flex-basis之后width的值将失效

          (6)flex--上面(3)(4)(5)简写

注意:

    align-self:auto 的时候,如果父容器有align-items的属性值的时候,那么align-self:auto就继承父元素align-items的属性值

    那么如果父元素没有align-items属性的时候,align-self:auto的值为align-self:stretch;

 

 

转载于:https://www.cnblogs.com/bear159412/p/11111639.html

本文来源weixin_30595035,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/29723

发表评论