flex布局实例_flex 布局教程:实例篇 - CSDN
精华内容
参与话题
  • Flex 布局教程:实例

    千次阅读 2016-07-14 14:34:44
    一、骰子的布局 骰子的一面,最多可以放置9个点。 下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。 如果不加说明,本节的HTML模板一律如下。 div class="box"> ...

    一、骰子的布局

    骰子的一面,最多可以放置9个点。

    下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。

    如果不加说明,本节的HTML模板一律如下。

    
    <div class="box">
      <span class="item"></span>
    </div>
    

    上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推。

    1.1 单项目

    首先,只有左上角1个点的情况。Flex布局默认就是首行左对齐,所以一行代码就够了。

    
    .box {
      display: flex;
    }
    

    设置项目的对齐方式,就能实现居中对齐和右对齐。

    
    .box {
      display: flex;
      justify-content: center;
    }
    

    
    .box {
      display: flex;
      justify-content: flex-end;
    }
    

    设置交叉轴对齐方式,可以垂直移动主轴。

    
    .box {
      display: flex;
      align-items: center;
    }
    

    
    .box {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    

    
    .box {
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }
    

    
    .box {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
    }
    

    1.2 双项目

    
    .box {
      display: flex;
      justify-content: space-between;
    }
    

    
    .box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    

    
    .box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }
    

    
    .box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
    }
    

    
    .box {
      display: flex;
    }
    
    .item:nth-child(2) {
      align-self: center;
    }
    

    
    .box {
      display: flex;
      justify-content: space-between;
    }
    
    .item:nth-child(2) {
      align-self: flex-end;
    }
    

    1.3 三项目

    
    .box {
      display: flex;
    }
    
    .item:nth-child(2) {
      align-self: center;
    }
    
    .item:nth-child(3) {
      align-self: flex-end;
    }
    

    1.4 四项目

    
    .box {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-content: space-between;
    }
    

    HTML代码如下。

    
    <div class="box">
      <div class="column">
        <span class="item"></span>
        <span class="item"></span>
      </div>
      <div class="column">
        <span class="item"></span>
        <span class="item"></span>
      </div>
    </div>
    

    CSS代码如下。

    
    .box {
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }
    
    .column {
      flex-basis: 100%;
      display: flex;
      justify-content: space-between;
    }
    

    1.5 六项目

    
    .box {
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }
    

    
    .box {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: space-between;
    }
    

    HTML代码如下。

    
    <div class="box">
      <div class="row">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
      </div>
      <div class="row">
        <span class="item"></span>
      </div>
      <div class="row">
         <span class="item"></span>
         <span class="item"></span>
      </div>
    </div>
    

    CSS代码如下。

    
    .box {
      display: flex;
      flex-wrap: wrap;
    }
    
    .row{
      flex-basis: 100%;
      display:flex;
    }
    
    .row:nth-child(2){
      justify-content: center;
    }
    
    .row:nth-child(3){
      justify-content: space-between;
    }
    

    1.6 九项目

    
    .box {
      display: flex;
      flex-wrap: wrap;
    }
    

    二、网格布局

    2.1 基本网格布局

    最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放。

    HTML代码如下。

    
    <div class="Grid">
      <div class="Grid-cell">...</div>
      <div class="Grid-cell">...</div>
      <div class="Grid-cell">...</div>
    </div>
    

    CSS代码如下。

    
    .Grid {
      display: flex;
    }
    
    .Grid-cell {
      flex: 1;
    }
    

    2.2 百分比布局

    某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。

    HTML代码如下。

    
    <div class="Grid">
      <div class="Grid-cell u-1of4">...</div>
      <div class="Grid-cell">...</div>
      <div class="Grid-cell u-1of3">...</div>
    </div>
    
    
    .Grid {
      display: flex;
    }
    
    .Grid-cell {
      flex: 1;
    }
    
    .Grid-cell.u-full {
      flex: 0 0 100%;
    }
    
    .Grid-cell.u-1of2 {
      flex: 0 0 50%;
    }
    
    .Grid-cell.u-1of3 {
      flex: 0 0 33.3333%;
    }
    
    .Grid-cell.u-1of4 {
      flex: 0 0 25%;
    }
    

    三、圣杯布局

    圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。

    HTML代码如下。

    
    <body class="HolyGrail">
      <header>...</header>
      <div class="HolyGrail-body">
        <main class="HolyGrail-content">...</main>
        <nav class="HolyGrail-nav">...</nav>
        <aside class="HolyGrail-ads">...</aside>
      </div>
      <footer>...</footer>
    </body>
    

    CSS代码如下。

    
    .HolyGrail {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    
    header,
    footer {
      flex: 1;
    }
    
    .HolyGrail-body {
      display: flex;
      flex: 1;
    }
    
    .HolyGrail-content {
      flex: 1;
    }
    
    .HolyGrail-nav, .HolyGrail-ads {
      /* 两个边栏的宽度设为12em */
      flex: 0 0 12em;
    }
    
    .HolyGrail-nav {
      /* 导航放到最左边 */
      order: -1;
    }
    

    如果是小屏幕,躯干的三栏自动变为垂直叠加。

    
    @media (max-width: 768px) {
      .HolyGrail-body {
        flex-direction: column;
        flex: 1;
      }
      .HolyGrail-nav,
      .HolyGrail-ads,
      .HolyGrail-content {
        flex: auto;
      }
    }
    

    四、输入框的布局

    我们常常需要在输入框的前方添加提示,后方添加按钮。

    HTML代码如下。

    
    <div class="InputAddOn">
      <span class="InputAddOn-item">...</span>
      <input class="InputAddOn-field">
      <button class="InputAddOn-item">...</button>
    </div>
    

    CSS代码如下。

    
    .InputAddOn {
      display: flex;
    }
    
    .InputAddOn-field {
      flex: 1;
    }
    

    五、悬挂式布局

    有时,主栏的左侧或右侧,需要添加一个图片栏。

    HTML代码如下。

    
    <div class="Media">
      <img class="Media-figure" src="" alt="">
      <p class="Media-body">...</p>
    </div>
    

    CSS代码如下。

    
    .Media {
      display: flex;
      align-items: flex-start;
    }
    
    .Media-figure {
      margin-right: 1em;
    }
    
    .Media-body {
      flex: 1;
    }
    

    六、固定的底栏

    有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。

    HTML代码如下。

    
    <body class="Site">
      <header>...</header>
      <main class="Site-content">...</main>
      <footer>...</footer>
    </body>
    

    CSS代码如下。

    
    .Site {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    
    .Site-content {
      flex: 1;
    }
    

    七,流式布局

    每行的项目数固定,会自动分行。

    CSS的写法。

    
    .parent {
      width: 200px;
      height: 150px;
      background-color: black;
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
    }
    
    .child {
      box-sizing: border-box;
      background-color: white;
      flex: 0 0 25%;
      height: 50px;
      border: 1px solid red;
    }
    

    (完)

    展开全文
  • Flex布局实例

    2019-10-08 10:54:20
    本文参考《阮一峰 Flex 布局 实例篇》 注:代码稍有改动,原文的宽度刚好够放三个点,有时候,第二个点并未居中,但看起来似乎是居中的,容易引起歧义. 本文 demo 源码 一、骰子布局 骰子的一面,最多可以放置...

    本文参考《阮一峰 Flex 布局 实例篇》
    注:代码稍有改动,原文的宽度刚好够放三个点,有时候,第二个点并未居中,但看起来似乎是居中的,容易引起歧义.
    本文 demo 源码

    在这里插入图片描述

    一、骰子布局
    骰子的一面,最多可以放置9个点下面,就来看看Flex如何实现,从一个点到九个点的布局。
    在这里插入图片描述

    如果不加说明,demo 中的HTML一律如下

    <div class="box"> 
       <span class="item"></span>
    </div>
    

    上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目,如果有多个项目,就要添加多个span元素,以此类推.

    1.1 单项目
    首先,只有左上角一个点的情况,flex布局默认就是首行左对齐,所以一行代码就够了

    .box{
       display: flex;
    }
    

    效果:
    在这里插入图片描述

    居中:

    .box{
        display: flex;
        justify-content: center;
    }
    

    效果
    在这里插入图片描述
    右对齐:

    .box{
    	display: flex;   
        justify-content: flex-end;
    }
    

    效果
    在这里插入图片描述
    设置交叉轴对齐方式,可以垂直移动主轴

    .box{   
    	 display: flex;
    	 align-items: center;
    }
    

    效果
    在这里插入图片描述

    上下左右居中

    .box{    
         display: flex;    
         align-items: center;    
         justify-content: center;
      }
    

    效果
    在这里插入图片描述

    1.2 双项目

    .box {
    	display: flex;
    	justify-content:space-between;
    }
    // 分布在两边
    

    效果
    在这里插入图片描述

    纵向排列

    .box {
    	display: flex;
    	flex-direction: column;
    	justify-content: space-between;
    }
    //   纵向排列 
    

    效果
    在这里插入图片描述
    纵向排列 且居中

    .box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    // 纵向排列 居中
    

    效果
    在这里插入图片描述

    斜对角分布

    .box {
    	display: flex;  
    	justify-content: space-between;
    }
    .item:nth-child(2) {  
    	align-self: flex-end;
    }
    // 斜对角分布
    

    效果
    在这里插入图片描述

    1.3 三项目
    斜一排

    .box {
    	display: flex;
    }
    .item:nth-child(2) {
    	align-self: center;
    }
    .item:nth-child(3) {  
    	align-self: flex-end;
    }
    // 斜一排
    

    效果
    在这里插入图片描述

    1.4 四项目
    html

    <div class="box"> 
    	<div class="column"> 
     		<span class="item"></span>
    		<span class="item"></span>
    	</div>
    	<div class="column">
    		 <span class="item"></span>
    		 <span class="item"></span>
    	</div>		
    </div>
    

    css

    .box {
    	display: flex;
    	flex-wrap: wrap;  
    	justify-content: flex-end;  
    	align-content: space-between;
    }
    .column {
    	  flex-basis: 100%;  
    	  display: flex;  
    	  justify-content: space-between;
    	  border: 1px solid red;
    }
    // 分布在四个角
    //  原理: 分成两列,同时,换行显示,两列中间由空格填充,每列的元素分布在两边
    

    效果
    在这里插入图片描述

    1.5 六项目
    html

    <div class="box"> 
    	<div class="column">
    		<span class="item"></span>
    		<span class="item"></span>
    		<span class="item"></span>
    	</div>
    	<div class="column">
    		<span class="item"></span>
    		<span class="item"></span>
    		<span class="item"></span>
    	</div>
    </div>
    

    效果
    在这里插入图片描述
    纵向排列的六项目

    .box {  
    	display: flex;  
    	flex-direction: column;  
    	flex-wrap: wrap;  
    	align-content: space-between;
    }
    .column {  
    	flex-basis: 100%;  
    	width: 30px;  
    	display: flex;  
    	flex-wrap: wrap;  
    	align-content: space-between; 
     	border: 1px solid red;
     }
    

    // 纵向排列效果
    在这里插入图片描述

    1.6 九项目

    .box {  
    	display: flex;  
    	flex-wrap: wrap;  
    	justify-content: space-between;
    }
    .column {  
    	flex-basis: 100%;  
    	justify-content: space-between;  
    	display: flex;  
    	border: 1px solid red;
    }
    

    效果
    在这里插入图片描述

    展开全文
  • &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&...圣杯布局&amp;lt;/title&amp;gt;
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>圣杯布局</title>
      <style>
        .holyGrail {
          display: flex;
    
          /* vh为相对于视口的高度。视口被均分为100vh。此处正好充满整个视口 */
          min-height: 100vh;
    
          /* 主轴方向改为垂直 */
          flex-direction: column;
        }
    
        header, footer {
          /* 头和尾固定高度10em */
          flex: 0 0 10em;
          background-color: darkgray;
          /*height: 3em;*/
        }
    
        .holyGrail-body {
          display: flex;
          flex: 1;
        }
    
        .holyGrail-nav, .holyGrail-ads {
          /* 两个边栏的宽度设置为12em */
          flex: 0 0 12em;
          background-color: antiquewhite;
        }
    
        .holyGail-content {
          flex: 1;
          background-color: yellowgreen;
        }
    
        .holyGrail-nav {
          /* 导航放到最左边。不管html怎样顺序,导航都在最左边。 */
          order: -1;
        }
    
        @media (max-width: 768px) {
          .holyGrail-body {
            flex-direction: column;
            flex: 1;
          }
    
          .holyGrail-nav, .holyGail-content, .holyGrail-ads {
            flex: 1;
          }
        }
    
      </style>
    </head>
    <body>
    <h2>圣杯布局</h2>
    <pre>参考:<a href="http://www.ruanyifeng.com/blog/2015/07/flex-examples.html" target="_blank">flex实例</a></pre>
    <p>圣杯布局是一种最常见的网页布局,从上到下有header,body,footer。body中有left(导航).center(主栏),right(侧栏)。</p>
    <p>如果是小屏幕,躯干的三栏自动变为垂直叠加。</p>
    <div class="holyGrail">
      <header>header</header>
      <div class="holyGrail-body">
        <main class="holyGail-content">content</main>
        <nav class="holyGrail-nav">nav</nav>
        <aside class="holyGrail-ads">ads</aside>
      </div>
      <footer>footer</footer>
    </div>
    </body>
    </html>
    
    展开全文
  • Flex布局实例

    2018-04-20 20:35:33
    一、骰子的布局骰子的一面,最多可以放置9个点。 下面,就来看看Flex如何实现,从1个点到9个点的布局如果不加说明,本节的HTML模板一律如下 <span class="item"></span> 上面代码中,div元素(代表骰子的一个面)...

    一、骰子的布局


    骰子的一面,最多可以放置9个点。

    这里写图片描述

    下面,就来看看Flex如何实现,从1个点到9个点的布局

    这里写图片描述

    如果不加说明,本节的HTML模板一律如下

    <div class="box">
      <span class="item"></span>
    </div>

    上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推。

    1.1 单项目




    首先,只有左上角1个点的情况。Flex布局默认就是首行左对齐,所以一行代码就够了。

    这里写图片描述

    .box {
      display: flex;
    }

    设置项目的对齐方式,就能实现居中对齐和右对齐。

    这里写图片描述

    .box {
      display: flex;
      justify-content: center;
    }

    这里写图片描述

    .box {
      display: flex;
      justify-content: flex-end;
    }

    设置交叉轴对齐方式,可以垂直移动主轴。

    这里写图片描述

    .box {
      display: flex;
      align-items: center;
    }

    这里写图片描述

    .box {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    这里写图片描述

    .box {
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }

    这里写图片描述

    .box {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
    }

    1.2 双项目


    这里写图片描述

    .box {
      display: flex;
      justify-content: space-between;
    }

    这里写图片描述

    .box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    这里写图片描述

    .box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }

    这里写图片描述

    .box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
    }

    这里写图片描述

    .box {
      display: flex;
    }
    
    .item:nth-child(2) {
      align-self: center;
    }

    这里写图片描述

    .box {
      display: flex;
      justify-content: space-between;
    }
    
    .item:nth-child(2) {
      align-self: flex-end;
    }

    1.3 三项目



    这里写图片描述

    .box {
      display: flex;
    }
    
    .item:nth-child(2) {
      align-self: center;
    }
    
    .item:nth-child(3) {
      align-self: flex-end;
    }

    1.4 四项目


    这里写图片描述

    .box {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-content: space-between;
    }
    

    这里写图片描述

    html代码

    <div class="box">
      <div class="column">
        <span class="item"></span>
        <span class="item"></span>
      </div>
      <div class="column">
        <span class="item"></span>
        <span class="item"></span>
      </div>
    </div>
    css代码
    .box {
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }
    
    .column {
      flex-basis: 100%;
      display: flex;
      justify-content: space-between;
    }

    1.5 六项目


    这里写图片描述

    .box {
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }

    这里写图片描述

    .box {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: space-between;
    }

    这里写图片描述
    html代码

    <div class="box">
      <div class="row">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
      </div>
      <div class="row">
        <span class="item"></span>
      </div>
      <div class="row">
         <span class="item"></span>
         <span class="item"></span>
      </div>
    </div>
    css代码
    .box {
      display: flex;
      flex-wrap: wrap;
    }
    
    .row{
      flex-basis: 100%;
      display:flex;
    }
    
    .row:nth-child(2){
      justify-content: center;
    }
    
    .row:nth-child(3){
      justify-content: space-between;
    }

    1.6 九项目


    这里写图片描述

    .box {
      display: flex;
      flex-wrap: wrap;
    }

    二,网格布局


    2.1 基本网格布局



    最简单的网格布局,就是平均分布。在容器里面平均分配空间,跟上面的骰子布局很像,但是需要设置项目的自动缩放。

    这里写图片描述
    HTML代码如下。

    <div class="Grid">
      <div class="Grid-cell">...</div>
      <div class="Grid-cell">...</div>
      <div class="Grid-cell">...</div>
    </div>

    CSS代码如下。

    .Grid {
      display: flex;
    }
    
    .Grid-cell {
      flex: 1;
    }

    2.2 百分比布局



    某个网格的宽度为固定的百分比,其余网格平均分配剩余的空间。
    这里写图片描述
    html代码

    <div class="Grid">
      <div class="Grid-cell u-1of4">...</div>
      <div class="Grid-cell">...</div>
      <div class="Grid-cell u-1of3">...</div>
    </div>

    css代码

    .Grid {
      display: flex;
    }
    
    .Grid-cell {
      flex: 1;
    }
    
    .Grid-cell.u-full {
      flex: 0 0 100%;
    }
    
    .Grid-cell.u-1of2 {
      flex: 0 0 50%;
    }
    
    .Grid-cell.u-1of3 {
      flex: 0 0 33.3333%;
    }
    
    .Grid-cell.u-1of4 {
      flex: 0 0 25%;
    }

    三、圣杯布局

    圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。
    这里写图片描述

    <body class="HolyGrail">
      <header>...</header>
      <div class="HolyGrail-body">
        <main class="HolyGrail-content">...</main>
        <nav class="HolyGrail-nav">...</nav>
        <aside class="HolyGrail-ads">...</aside>
      </div>
      <footer>...</footer>
    </body>
    .HolyGrail {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    
    header,
    footer {
      flex: 1;
    }
    
    .HolyGrail-body {
      display: flex;
      flex: 1;
    }
    
    .HolyGrail-content {
      flex: 1;
    }
    
    .HolyGrail-nav, .HolyGrail-ads {
      /* 两个边栏的宽度设为12em */
      flex: 0 0 12em;
    }
    
    .HolyGrail-nav {
      /* 导航放到最左边 */
      order: -1;
    }

    如果是小屏幕,躯干的三栏自动变为垂直叠加。

    @media (max-width: 768px) {
      .HolyGrail-body {
        flex-direction: column;
        flex: 1;
      }
      .HolyGrail-nav,
      .HolyGrail-ads,
      .HolyGrail-content {
        flex: auto;
      }
    }

    四、输入框的布局



    我们常常需要在输入框的前方添加提示,后方添加按钮。
    这里写图片描述

    <div class="InputAddOn">
      <span class="InputAddOn-item">...</span>
      <input class="InputAddOn-field">
      <button class="InputAddOn-item">...</button>
    </div>
    .InputAddOn {
      display: flex;
    }
    
    .InputAddOn-field {
      flex: 1;
    }

    五、悬挂式布局



    有时,主栏的左侧或右侧,需要添加一个图片栏。
    这里写图片描述

    <div class="Media">
      <img class="Media-figure" src="" alt="">
      <p class="Media-body">...</p>
    </div>
    .Media {
      display: flex;
      align-items: flex-start;
    }
    
    .Media-figure {
      margin-right: 1em;
    }
    
    .Media-body {
      flex: 1;
    }

    六、固定的底栏



    有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。
    这里写图片描述

    <body class="Site">
      <header>...</header>
      <main class="Site-content">...</main>
      <footer>...</footer>
    </body>
    .Site {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    
    .Site-content {
      flex: 1;
    }

    七,流式布局

    每行的项目数固定,会自动分行。
    这里写图片描述

    .parent {
      width: 200px;
      height: 150px;
      background-color: black;
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
    }
    
    .child {
      box-sizing: border-box;
      background-color: white;
      flex: 0 0 25%;
      height: 50px;
      border: 1px solid red;
    }
    展开全文
  • flex布局教程:实例

    2017-03-20 14:40:45
    我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局 骰子的一面,最多可以放置9个点。 下面,就来看看Flex...
  • Flex布局应用实例

    万次阅读 多人点赞 2018-07-25 16:28:38
    1、flex设置元素水平垂直居中 &lt;div class="box"&gt; &lt;h3&gt;Flex实现水平垂直居中&lt;/h3&gt; &lt;p&gt; flex-direction决定主轴的方向:row|row-reverse...
  • flex布局介绍和简单案例

    千次阅读 2018-07-21 15:45:07
    flex布局可以帮我们快速布局一些区块,实现你想要的效果,不用再去float,position之类的.我们在布局网页的时候很多时候都是一些特殊布局,flex就能帮我快速去布局,不需要去定位. 任何一个盒子都可以指定为flex布局,...
  • FLEX布局实例

    2018-05-02 08:53:30
    今天给大家分享一下,修真院官网css5任务中可能会使用到的知识点:FLEX布局实例1.背景介绍2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器...
  • flex布局教程的实例

    2020-07-21 10:31:48
    嗯 关于廖雪峰老师网站的学习笔记---flex弹性盒子实例
  • flex布局样例

    2020-09-08 10:43:44
    flex布局样例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div class="first-face"> <span ...
  • flex布局实例

    2018-12-04 14:29:23
    在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现 HTML代码: &lt;div class="demo"&gt; &lt;div class="inner"&...
  • flex布局

    千次阅读 2016-12-28 14:35:59
    flex布局
  • HTML Flex布局实例

    2018-08-21 23:07:07
    Flex 布局教程:实例篇 bShare.addEntry({ title: document.getElementById("page-title").innerHTML, url:window.location....
  • flex 布局实例

    2019-10-06 18:21:34
    Flex布局默认就是首行左对齐,所以一行代码就够了。 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="wi...
  • [知识总结(转)]flex布局实例

    千次阅读 2019-03-07 20:41:12
    Flex 布局教程:实例篇我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面,最多可以放置9个点。下面,就来看看...
  • 1.产品列表均匀分布案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>产品列表均匀分布案例</title> <style> * { ......
  • Flex 布局实例演示

    千次阅读 2016-11-25 18:47:00
    今天介绍常见布局Flex写法。你会看到,不管是什么布局Flex往往都可以几行命令搞定。骰子布局骰子的一面,最多可以放置9个点。下面,就来看看Flex如何实现,从1个点到9个点的布局。你可以到codepen查看Demo。如果...
  • &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&...输入框的布局&amp;lt;/title&amp;gt;
  • &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;...flex实例之网格布局&amp;lt;/title&am
1 2 3 4 5 ... 20
收藏数 9,808
精华内容 3,923
关键字:

flex布局实例