css弹性布局总结

前端刘亦菲
131 阅读4分钟

css中弹性布局(也叫flex布局）

Flexbox是最新版本的CSS3中引入的一种强大且兼容性好的布局方法，可以很容易的处理好页面上的元素布局，并且创建可以自动缩小和放大页面的动态用户界面。

由于总是记不住每个属性表示的意思，也因为刚实习的原因，用的地方不多不够熟练，在此梳理一遍加深记忆。
  1. 弹性盒子由弹性容器（也就是父元素 flex container）和弹性子元素(flex item)组成。
  2. 将一个元素定义为弹性容器，设置display:flex;或者display:inline-flex;（webkit内核的浏览器必须加上-webkit)
  • 我们先定义一个弹性容器和三个子盒子,呈现的样式如下：
      .container {
        display: flex;
        width: 400px;
        height: 250px;
        background-color: pink;
      }
       .item {
           width: 100px;
           height: 100px;
           margin: 10px;
           background-color:red;
       }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>

image.png

容器默认有两根轴：水平的和垂直的，水平的叫主轴，垂直的叫交叉轴

容器的属性主要有6个

  • flex-direction:决定主轴的排列方向（子元素的排列方向） 在父元素中设置属性：flex-direction:row | row-reverse | column | column-reverse;

1.flex-direction:row;默认属性，从左往右水平方向布局

image.png

2.flex-direction:row-reverse;:从右往左水平方向布局

image.png

3.flex-direction:column;从上往下垂直方向布局

image.png

  1. flex-direction:column-reverse;:从下往上垂直方向布局

image.png

  • flex-wrap:决定子元素是否换行 在父元素中设置属性：flex-wrap:nowrap | wrap | wrap-reverse;
  1. flex-wrap:nowrap;默认不换行，所有元素都在一行显示。（如果所有子元素所在的宽度超过了父元素容器，也会在一行显示，但是子元素的大小变了）

image.png

  1. flex-wrap: wrap:换行，超过的子元素在第二行按顺序显示

image.png

  1. flex-wrap:wrap-reverse; 换行，第一行在下面顺序显示

image.png

  • flex-flow:上面两个元素的简写，默认值是row nowrap(从左到右水平布局并且在一行显示）
  • justify-content：决定子元素在水平方向上的对齐方式。 父元素可以设置：justify-content: flex-start | flex-end | center | sapce-between | space-around;
  1. justify-content: flex-start:默认值，以左边为对齐方式

image.png

  1. justify-content: flex-end;:以右边为对齐方式

image.png

  1. justify-content:center;:居中显示,但是不能决定垂直方向

image.png

4.justify-content:space-between;:两端对齐，项目之间的间隔都相等

image.png

  1. justify-content:space-around;:每个项目两侧的间隔相等。所以，项目之间的间隔比边框的间隔大一倍。

image.png

  • align-item:定义子元素在垂直轴上的对齐方式 父元素可以设置:align-items: flex-start | flex-end | center | baseline |stretch;
  1. align-items: flex-start;:以垂直方向的上沿对齐

image.png

  1. align-items: flex-end;:以垂直方向的下沿对齐

image.png

  1. align-items: center;:垂直方向居中对齐

image.png

  1. align-items: baseline:子元素第一行文字的基线对齐

image.png

  1. align-items: stretch;:如果子元素没有设置高度或者设为auto,将占满整个容器的高度。默认值

image.png

  • align-content:定义了多根轴线的对齐方式，如果只有一根轴线这个属性就不起作用 父元素可以设置：align-content: flex-start | flex-end | center | space-between | sapce-around | stretch;:该属性应用的比较少，暂时先不记录

子元素的属性6个

  • order:定义子元素的排列顺序。数值越小，排列越靠前，默认为0
  • flex-grow:定义子元素的放大比例，默认为0，如果存在剩余空间也不放大。 没有放大的效果：

image.png

放大3倍的效果：

image.png

  • flex-shrink:缩小元素比例，默认为1，如果空间不足，该项目将缩小。
  • flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间，他的默认值为auto，项目的本来大小。
  • flex: 是flex-grow flex-shrink flex-basis的简写，默认值为 0 1 auto
    我们通常在项目中使用的是：flex : 1;----->表示的是均匀分配每个子元素（实则展开为:flex: 1 1 0)
  • align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch. 该属性可能取6个值，除了auto，其他都与align-items属性完全一致.
avatar
文章
阅读
粉丝