flex属性

  • 历史：2009年，W3C提出了一种新的方案—-Flex布局，目前，它已经得到了所有浏览器的支持。
  • 说明：在主轴方向调整弹性项目的宽度或高度，占满空间。用来为盒状模型提供最大的灵活性，解决传统布局的一些问题，比如，垂直居中的实现。

1. 基本使用：

div#one {display: flex;}
div#two {display: inline-flex;}

<div id="one">
  <p>flex item with<br>two longer lines</p>
  <span>flex item</span>
  <p>flex item</p>
</div>

<div id="two">
  <p>flex item with<br>two longer lines</p>
  <span>flex item</span>
  <p>flex item</p>
</div>

效果：

  • display:flex;
    image-WJxA.png

  • display:inline-flex;
    image-OWis.png

2. 容器属性

  • flex-direction：主轴方向
flex-direction: row;            /* 默认，水平从左到右 */
flex-direction: row-reverse;    /* 水平从右到左 */
flex-direction: column;         /* 垂直从上到下 */
flex-direction: column-reverse; /* 垂直从下到上 */
  • 例子：
<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ol>
  • row
    image-deIS.png
  • row -reverse
    image-rmQj.png
  • column
    image-fJsG.png
  • column-reverse
    image-fckf.png