css布局之 - flex布局

最新推荐文章于 2024-08-17 22:24:13 发布

极夜之光

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量239

点赞数

分类专栏： JavaScript 文章标签： css flex css布局弹性布局 flex布局

本文链接：https://blog.csdn.net/cocboo/article/details/82321439

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<style type="text/css">
	  html *{
        padding: 0;
        margin: 0;
      }
      .layout article div{
        min-height: 100px;
      }

      .d1{
      display: flex; /*设置为弹性布局*/
      flex-direction: row; /*设置主轴的方向(row | row-reverse | column | column-reverse)*/
      flex-wrap: wrap; /*设置换行方式(flex-wrap: nowrap | wrap | wrap-reverse)*/
      justify-content: center; /*设置在主轴上的对齐方式(flex-start | flex-end | center | space-between | space-around)*/
      align-items: center; /*设置在交叉轴上的对齐方式(flex-start | flex-end | center | baseline | stretch)*/
      
      /*设置多轴线的对齐方式，如果项目只有一根轴线，该属性不起作用(flex-start | flex-end | center | space-between | space-around | stretch)*/
      /*align-content: center;*/

      width: 100%;
      height: 200px;
      background-color: #F1F1F1;
    }
    .child{
      width: 200px;
      height: 50px;
      background-color: red;
      margin-left: 10px;
    }
	</style>
</head>
<body>
<section class="layout flexbox">
      <style>
        .layout.flexbox{
          margin-top: 100px;
        }
        .layout.flexbox .left-center-right{
          display: flex;
        }
        .layout.flexbox .left{
          width: 300px;
          background: red;
        }
        .layout.flexbox .center{
          flex:1;
          background: yellow;
        }
        .layout.flexbox .right{
          width: 300px;
          background: blue;
        }
      </style>
      <h1>三栏布局</h1>
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h2>flex解决方案</h2>
          <p>http://www.runoob.com/w3cnote/flex-grammar.html</p>
        </div>
        <div class="right"></div>
      </article>
    </section>

    <section style="margin-top: 50px">
      <div class="d1">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
      </div>
    </section>
</body>
</html>

极夜之光

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css布局之 - flex布局

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;test&lt;/title&gt; &lt;style type="text/css"&gt; html *{ padding: 0; margin: 0; } .layout article div{
复制链接

扫一扫

专栏目录