• 当前位置: 首页 / 建站百科 / 网站建设
  • Flex弹性布局详解

    时间:2022-12-28 浏览量: 收藏

    一、 弹性布局

      在平时的我们常用的布局类型有以下几种:

      1.浮动+定位

      2.自适应(百分比)

      3.响应式布局

      4.弹性布局(Flex布局

      以下内容是比较常用的弹性布局,但块标签与行内块标签是有区别的。

      优点:兼容性支持所有浏览器(Webkit内核的浏览器,要加上-webkit-),可以随用户的喜好进行调节,可以将任何一个容器指定为Flex布局。

      缺点:因为弹性布局可调节,所以有巨大的可能性,需要花很多的时间进行调整;有些弹性设计要为IE9以下版本单独考虑样式,不过……IE9以下基本没多少人在用了。

      注意:当我们使用了弹性布局,那么在CSS里的float、clear和vertical-align就会失效。

    二、 弹性布局的属性

      首先是作为弹性布局的容器的属性。  

      1.flex-direction属性

      flex-direction决定了容器的方向。

           div { flex-direction: row | row-reverse | column | column-reverse;}

      四个值分别为:row(默认值)从左向右、row-reverse从右向左、column从上到下、column-reverse从下到上。

      2.flex-wrap属性

      默认情况下的布局一般在同一行,当设置了flex-wrap属性之后将自动将排列不下的内容进行换行。

          div{flex-wrap: nowrap | wrap | wrap-reverse;}

      四个值分别为:nowrap(默认值)不换行、wrap向下换行、wrap-reverse向上换行。

      3.flex-flow属性

      flex-flow属性是以上两种属性的简写形式,默认值是row nowrap。

          div {flex-flow: <flex-direction> || <flex-wrap>;}

      4.justify-content属性

      justify-content属性定义了在容器方向上的对齐方式。

         div {justify-content: flex-start | flex-end | center | space-between | space-around;}

      flex-start(默认值):向左对齐。

      flex-end:向右对齐。

      center: 居中对齐。

      space-between:两端对齐,每一个子元素等距离间隔,子元素与容器边框无间隔。

      space-around:每个子元素两侧的间隔相等。子元素之间的间隔比子元素与容器边框的间隔大一倍。

      5.align-items属性

      align-items属性定义在垂直容器方向上的对齐方式。

          div {align-items: flex-start | flex-end | center | baseline | stretch;}

      flex-start:垂直方向的起点对齐。

      flex-end:垂直方向的终点对齐。

      center:垂直方向的中点对齐。

      baseline: 与第一个子元素中文字的基线对齐。

      stretch(默认值):如果子元素没有设置高度或者高度设为auto,那么它将占满整个容器的高度。

      6.align-content属性

      align-content属性定义了子元素两种方向上的对齐方式。

          div {align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

      flex-start:当容器方向子元素刚好填满时,与垂直方向的起点对齐。

      flex-end:当容器方向子元素刚好填满时,与垂直方向的终点对齐。

      center:当容器方向子元素刚好填满时,与垂直方向的中点对齐。

      space-between:当容器方向子元素刚好填满时,垂直方向两端对齐,子元素之间的等距离间隔。

      space-around:两个方向两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

      stretch(默认值):占满整个垂直方向。

      下面就是具有弹性布局容器中子元素的属性

      1.order属性

      order属性定义了子元素的排列顺序,数值小的在前。

          .son {order: <integer>;}

      2.flex-grow属性

      flex-grow属性定义了子元素的放大比例,默认值为0。

          .son {flex-grow: <number>; /* default 0 */}

      当给所有子元素设置该属性为1,那么将等分所有空间,如果单独给某一个子元素设置n倍,那么该子元素将占据的空间比其他子元素多n倍。

      3.flex-shrink属性

      flex-shrink属性定义了子元素的缩小比例,默认值为1。

    .son {flex-shrink: <number>; /* default 1 */}

      给所有子元素设置该属性为1,当空间不足时那么所有子元素将等比例缩小平分所有空间,如果单独给某一个子元素设置0,那么该子元素将在空间不足时不缩小。

      4.flex-basis属性

      该属性定义了给子元素分配空间时其占据的空间为多少,可以设置为与其width和height属性一样的值,那么它将被分配固定的空间大小。

      5.flex属性

      该属性为flex-grow, flex-shrink 和 flex-basis的简写。

      6.align-self属性

      该属性允许设置过的子元素有与其他子元素不一样的对齐方式,可以覆盖align-items属性。

          .son {align-self: auto | flex-start | flex-end | center | baseline | stretch}

      auto:默认值,表示默认继承父级的align-items属性。

      flex-start:垂直方向的起点对齐。

      flex-end:垂直方向的终点对齐。

      center:垂直方向的中点对齐。

      baseline: 与第一个子元素中文字的基线对齐。

      stretch(默认值):如果子元素没有设置高度或者高度设为auto,那么它将占满整个容器的高度。

    flex布局(弹性布局)

    1. 容器具备的属性有:

      flex-dirction:(决定主轴的方向)(即项目排列方向) 取值:row/row-reverse/column/column-reverse/ flex-wrap:(如果一条轴线排不了,如何换行) 取值:nowrap(默认):不换行。 wrap:换行,第一行在上方。 wrap-reverse:换行,第一行在下方。 flex-flow :(flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap) justify-content:(justify-content属性定义了项目在主轴上的对齐方式。) 取值:flex-start(默认值):左对齐 flex-end:右对齐 center: 居中 space-between:两端对齐,项目之间的间隔都相等。 space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 align-items (交叉轴上如何对齐) 取值:flex-start/flex-end/center/baseline/stretch align-content(定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用) 取值: flex-start:与交叉轴的起点对齐。 flex-end:与交叉轴的终点对齐。 center:与交叉轴的中点对齐。 space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 stretch(默认值):轴线占满整个交叉轴。

    2. 项目的属性: order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大 flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 flex-basis项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大 小。 flex align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属 性,如果没有父元素,则等同于stretch。


    Flex布局    display:flex    flex属性    

    顶一下
    (0)
    0.00%
    踩一下
    0
    0.00%

    加载中~

    Copyright © 2012-2024 世敏网络 版权所有   闽ICP备18026760号-1    闽公网安备 35020502000640号   网站地图    Sitemap   关键词聚合

    世敏网络

    您已成功复制微信号,去微信立即添加好友!

    打开微信

    Wechart

    点击下方复制按钮,复制微信号!

    jzm866081

    https://www.xmsmwl.cn
    厦门世敏网络科技有限公司

    点击这里给我发消息
    嘿!有什么能帮到您的吗?