• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS3常规使用(9):Flexbox弹性伸缩布局

    CSS3常规使用(9):Flexbox弹性伸缩布局

    作者: 分类:HTML5与CSS3.0 点击: 245 次
    wordpress CMS主题:ssmay主题

      Flex布局是CSS3引入的一个新概念,主要是让容器有能力自适应地布局,让它的子元素能自动改变其宽度、高度,以适配所有终端设备的屏幕大小。也就是此前所说的响应式布局。Flex布局在屏幕和浏览器窗口大小改变时可以灵活调整布局,调整项目大小,控制元素在页面上的布局方向等。一起来看看这个神奇的Flex弹性伸缩布局吧。

       

      1:设置弹性伸缩盒:

       

       display:flex; 将容器盒模型作为块弹性伸缩盒显示

      display:inline-flex; 将容器盒模型作为内联级弹性伸缩盒显示

       

      2:设置伸缩项目的子元素排列方式:

       

       flex-direction:column; 从上到下排列;

      flex-direction:column-reverse; 从下到上排列;

      flex-direction:row; 从左到右排列;

      flex-direction:row-reverse; 从右到左排列;

       

      3:设置无法换行时自动换行 多个子元素宽度超过盒子宽时,子元素换行

       

       flex-wrap:wrap; 无法容纳时自动换行;

      flex-wrap:wrap-reverse; 无法容纳时自动换行,方向与wrap相反;

       

      4:集合排列方向和控制换行的简写形式:

       

       flex-flow:row-reverse wrap; 从右到左排列;超出宽度就换行。

       

      5:设置伸缩项目的水平对齐方式:

       

       justify-content:flex-start; 以起始点靠齐;

      justify-content:flex-end; 以结束点靠齐;

      justify-content:center; 以中心点靠齐;

      justify-content:space-between; 两边对齐,平局分布

      justify-content:space-around; 两边对齐,平局分布,但两端保留一半的空间

       

      6:处理伸缩项目容器的额外空间(垂直对齐方式)

       

       align-items:flex-start; 顶部对齐,并清理下部额外空间

      align-items:flex-end; 底部对齐,并清理上部额外空间

      align-items:center; 以中心点对齐,并清理上下额外空间

      align-items:baseline; 以基线为基准,清现额外空间

      align-items:stretch; 默认。拉伸。不清理额外空间

       

      7:单独清理某一个伸缩项目的额外(即:单独清理某一个子元素)

       

       align-self的值与align-items的一样。如:

      align-self:center; 以中心点对齐,并清理上下额外空间

       

      8:控制伸缩窗口的比例分配(对单个子元素操作)

       

      例:盒子内有3个p子元素;

       p:nth-child(1){ flex:2; } 宽度占比2 (各占比数可随便设置)

      p:nth-child(2){ flex:3; } 宽度占比3

      p:nth-child(3){ flex:2; } 宽度占比2

      3个子元素总占比数为 2+3+2 = 7 ;第一个元素宽度占比2/7;第二个占比3/7;第三个2/7

       

      9:控制各伸缩项目出现的顺序:(对单个子元素操作)

       

      例:盒子内有3个p子元素;

       p:nth-child(1){ order:2; } 让第1个子元素显示在第2个位置上;

      p:nth-child(2){ order:3; } 让第2个子元素显示在第3个位置上;

      p:nth-child(3){ order:1; } 让第3个子元素显示在第1个位置上;



      QQ二维码

    文章作者:hero2018
    本文地址:http://wanlimm.com/77201808046441.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.