1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS3伸缩布局</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.             padding: 0;
  10.             font-family: '微软雅黑';
  11.             background-color: #F7F7F7;
  12.         }
  13.  
  14.         ul {
  15.             margin: 0;
  16.             padding: 0;
  17.             list-style: none;
  18.         }
  19.  
  20.         .wrapper {
  21.             width: 1024px;
  22.             margin: 0 auto;
  23.         }
  24.  
  25.         .wrapper > section {
  26.             min-height: 300px;
  27.             margin-bottom: 30px;
  28.             box-shadow: 1px 1px 4px #DDD;
  29.             background-color: #FFF;
  30.         }
  31.  
  32.         .wrapper > header {
  33.             text-align: center;
  34.             line-height: 1;
  35.             padding: 20px;
  36.             margin-bottom: 10px;
  37.             font-size: 30px;
  38.         }
  39.  
  40.         .wrapper section > header {
  41.             line-height: 1;
  42.             padding: 10px;
  43.             font-size: 22px;
  44.             color: #333;
  45.             background-color: #EEE;
  46.         }
  47.  
  48.         .wrapper .wrap-box {
  49.             padding: 20px;
  50.         }
  51.  
  52.         .wrapper .brief {
  53.             min-height: auto;
  54.         }
  55.  
  56.         .wrapper .flex-img {
  57.             width: 100%;
  58.         }
  59.  
  60.         /*全局设置*/
  61.         section ul {
  62.             /*把所有ul指定成了伸缩盒子*/
  63.             display: flex;
  64.  
  65.             /*这里只是一个小的测试*/
  66.             /*flex-direction: row-reverse;*/
  67.         }
  68.  
  69.         section li {
  70.             width: 200px;
  71.             height: 200px;
  72.             text-align: center;
  73.             line-height: 200px;
  74.             margin: 10px;
  75.             background-color: pink;
  76.         }
  77.  
  78.         .flex-start ul {
  79.             justify-content: flex-start;
  80.         }
  81.  
  82.         .flex-end ul {
  83.             justify-content: flex-end;
  84.         }
  85.  
  86.         .center ul {
  87.             justify-content: center;
  88.         }
  89.  
  90.         .space-around ul {
  91.             justify-content: space-around;
  92.         }
  93.  
  94.         .space-between ul {
  95.             justify-content: space-between;
  96.         }
  97.     </style>
  98. </head>
  99. <body>
  100.     <div class="wrapper">
  101.         <header>CSS3-伸缩布局详解</header>
  102.  
  103.         <!-- 简介 -->
  104.         <section class="brief">
  105.             <header>justify-content</header>
  106.             <div class="wrap-box">
  107.                 <p>主轴方向对齐，可以调整元素在主轴方向上的对齐方式，包括flex-start、flex-end、center、space-around、space-between几种方式</p>
  108.             </div>
  109.         </section>
  110.  
  111.         <!-- 分隔线 -->
  112.         <section class="flex-start">
  113.             <header>flex-start</header>
  114.             <div class="wrap-box">
  115.                 <p>起始点对齐</p>
  116.                 <ul>
  117.                     <li>1</li>
  118.                     <li>2</li>
  119.                     <li>3</li>
  120.                 </ul>
  121.             </div>
  122.         </section>
  123.  
  124.         <section class="flex-end">
  125.             <header>flex-end</header>
  126.             <div class="wrap-box">
  127.                 <p>终止点对齐</p>
  128.                 <ul>
  129.                     <li>1</li>
  130.                     <li>2</li>
  131.                     <li>3</li>
  132.                 </ul>
  133.             </div>
  134.         </section>
  135.  
  136.         <section class="center">
  137.             <header>center</header>
  138.             <div class="wrap-box">
  139.                 <p>居中对齐</p>
  140.                 <ul>
  141.                     <li>1</li>
  142.                     <li>2</li>
  143.                     <li>3</li>
  144.                 </ul>
  145.             </div>
  146.         </section>
  147.  
  148.         <section class="space-around">
  149.             <header>space-around</header>
  150.             <div class="wrap-box">
  151.                 <p>四周环绕</p>
  152.                 <ul>
  153.                     <li>1</li>
  154.                     <li>2</li>
  155.                     <li>3</li>
  156.                 </ul>
  157.             </div>
  158.         </section>
  159.  
  160.         <section class="space-between">
  161.             <header>space-between</header>
  162.             <div class="wrap-box">
  163.                 <p>两端对齐</p>
  164.                 <ul>
  165.                     <li>1</li>
  166.                     <li>2</li>
  167.                     <li>3</li>
  168.                 </ul>
  169.             </div>
  170.         </section>
  171.     </div>
  172. </body>
  173. </html>

css3伸缩布局中justify-content详解的更多相关文章

  1. DIV-CSS布局中position属性详解

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  2. css3自适应布局单位vw,vh详解

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

  3. css3浏览器私有属性前缀使用详解

    什么是浏览器私有属性前缀 CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分. 以下是几种常用前缀 -webkit- -moz- -m ...

  4. 「翻译」Unity中的AssetBundle详解（二）

    为AssetBundles准备资源 使用AssetBundles时,您可以随意将任何Asset分配给所需的任何Bundle.但是,在设置Bundles时,需要考虑一些策略.这些分组策略可以使用到任何你 ...

  5. 转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解

    目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果

  6. Android中Service(服务)详解

    http://blog.csdn.net/ryantang03/article/details/7770939 Android中Service(服务)详解 标签: serviceandroidappl ...

  7. Android中mesure过程详解

    我们在编写layout的xml文件时会碰到layout_width和layout_height两个属性,对于这两个属性我们有三种选择:赋值成具体的数值,match_parent或者wrap_conte ...

  8. Android中Intent组件详解

    Intent是不同组件之间相互通讯的纽带,封装了不同组件之间通讯的条件.Intent本身是定义为一个类别(Class),一个Intent对象表达一个目的(Goal)或期望(Expectation),叙 ...

  9. CSS3 伸缩布局盒模型记

    CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...

随机推荐

  1. APICloud 获取缓存以及清除缓存（常用第三方方法）

    一.app中经常会有缓存的清除这个操作,具体如下 1.获取缓存大小 apiready = function() { api.getCacheSize(function(ret, err) { //si ...

  2. 01 DOS常用命令

    有时候没有可视化窗口,命令行对文件进行操作更方便快捷 cmd 命令弹出 dir 查看当前所在目录下的文件 ctrl+c 退出 \a 显示隐藏文件 cd /改变到根目录 dir /a 显示隐藏文件 di ...

  3. python时间序列按频率生成日期

    有时候我们的数据是按某个频率收集的,比如每日.每月.每15分钟,那么我们怎么产生对应频率的索引呢?pandas中的date_range可用于生成指定长度的DatetimeIndex.我们先看一下怎么生 ...

  4. Scrapy处理200-300范围之外的响应代码

    HttpErrorMiddleware 类scrapy.spidermiddlewares.httperror.HttpErrorMiddleware 过滤掉不成功(错误)的HTTP响应,以便蜘蛛不必 ...

  5. css 陌生属性

    记录一些我之前没见过属性 1.width:100vh  100vh 2.min-height:calc(100vh + 51px);cale 3.:nth-child nth-child   和 :n ...

  6. UNIX C 信号

    1.信号处理 #include <signal.h> typedef void(*sighander_t)(int); sighander_t signal(int signum,sigh ...

  7. JSLinq 的使用

    在net 中经常使用Linq 语法或者lamada 表达式,在使用的过程中感觉很方便,但是在涉及到JS的时候,总要自己去写逻辑代码去查询相关数据,通过搜索发现 已经有关于JSLInq的扩展方法,可以像 ...

  8. 2.1 SVN的安装

     一.SVN客户端安装 运行TortoiseSVN-1.6.6.17493-win32-svn-1.6.6.msi程序, 开始安装 点击Next, 下一步 选择 I accept 接受, 点击Next ...

  9. jquery怎样获取多个复选框的值？

    jquery的遍历方法可以获取复选框所欲的选中值 1 2 $("input:checkbox:checked").each(function(index,element));    ...

  10. （31）Spring Boot导入XML配置【从零开始学Spring Boot】

    [来也匆匆,去也匆匆,在此留下您的脚印吧,转发点赞评论: 您的认可是我最大的动力,感谢您的支持] Spring Boot理念就是零配置编程,但是如果绝对需要使用XML的配置,我们建议您仍旧从一个@Co ...