flex布局实例:网格布局


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex实例之网格布局title>
  <style>
    pre {
      font-size: 16px;
    }
    .grid {
      display: flex;
    }
    .grid-cell {
      margin: 20px;

      height: 100px;
      background-color: antiquewhite;

      flex: auto;
    }

    .grid .u-lof3 {
      flex: 0 0 33.3333%;
    }

    .grid .u-lof4 {
      flex: 0 0 25%;
    }
  style>
head>
<body>
<h2>flex实例之网格布局h2>
<pre>参考:<a href="http://www.ruanyifeng.com/blog/2015/07/flex-examples.html" target="_blank">flex实例a>pre>
<h3>1.基本网格布局h3>
<p>最简单的网格布局就是平均分配,需要设置项目的自动缩放p>
<pre>
  flex属性是
  flex-grow (默认0,不放大)
  flex-shrink (默认1,缩小)
  flex-basis (默认auto,占据主轴空间自动)的简写
  该属性有两个快捷键:auto即1(1 1 auto,可放大、缩小、自动),none即0(0 0 auto,不放大、不缩小、自动)
pre>
<div class="grid"> 
  <div class="grid-cell">1/2div>
  <div class="grid-cell">1/2div>
div>
<div class="grid">
  <div class="grid-cell">1/3div>
  <div class="grid-cell">1/3div>
  <div class="grid-cell">1/3div>
div>

<h3>2.百分比布局h3>
<p>某个网格的宽度固定百分比,其余网格平均分配剩余的空间p>
<div class="grid">
  <div class="grid-cell u-lof4">1/4div>
  <div class="grid-cell">autodiv>
  <div class="grid-cell u-lof3">1/3div>
div>
body>
html>

你可能感兴趣的:(CSS,前端项目)