Flex学习笔记

今日用到css的flex属性,不甚了解,看教程之余觉得阮神写得相当全面,一篇语法,一篇实例,看完也就知道怎么用了。


Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

将容器指定为Flex布局:

.box{
  display: flex;
}

行内元素也可以使用Flex布局:

.box{
  display: inline-flex;
}

Webkit内核的浏览器,必须加上-webkit前缀:

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

之后,将以下6个属性设置在容器上:

  • flex-direction 属性决定主轴的方向(即项目的排列方向)
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

将以下6个属性设置在项目上:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

以下是简单实例

<!DOCTYPE html>
<html>
<head>
    <title>flex</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<style type="text/css">
    #box {
    display: -webkit-flex;
    display: flex;    //使用flex布局
    -webkit-flex-direction: row;
    flex-direction: row;   //横排
    flex-wrap: wrap;   //换行
    }

    .item {
    border: 1px solid black;
    -webkit-flex: auto;
    flex: auto;   
    }
</style>

<div id="box">
        <div class="item" >我有一壶酒 </div>
        <div class="item" >足以慰风尘</div>
</div>
</div>
</body>
</html>

显示效果大致是这样的:

 

我有一壶酒 足以慰风尘

宽度变窄,自动换行:

我有一壶酒
足以慰风尘

以上。


共有 2 条评论

    1. LIFET说道:

      @悠然 大佬过奖了 哈哈

发表评论

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