Flex 布局教程实例

一、Flex 布局是什么?

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

任何一个容器都可以指定为 Flex 布局。


.box{
display: flex;
}

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


.box{
display: inline-flex;
}

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


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

注意,设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

二、基本概念

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

三、容器的属性

三、容器的属性

以下6个属性设置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

四、项目的属性

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

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

实例代码html如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.d1{
width: 180px;
height: 100px;
border: 1px solid #d3d3d3;
border-radius: 4px;
margin: 20px 0;
/*flex布局 -- css*/
display: flex; /*默认左对齐**/
justify-content: center; /**水平对齐方式justify-content flex-start:左对齐 center:居中 flex-end:右对齐**/
align-items:center; /**垂直对齐方式align-items flex-start:左对齐 center:居中 flex-end:右对齐**/
}
.d2{
width: 180px;
/*height: 100px;*/
border: 1px solid #d3d3d3;
border-radius: 4px;
margin: 20px 0;
/*flex布局 -- css*/
display: flex;
flex-direction: column; /**垂直排列**/
justify-content: space-between; /**水平排列**/
align-items: center; /**垂直居中**/ display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.d1 p{
margin: 0 10px;
}
.d2 p{
margin: 10px 0px;
}
</style>
<body>
<!--单项目-->
<div class="d1">
<!-- <img src="Locked2.png" alt=""> -->
<p>首页</p>
<p>首页</p>
</div> <!--双项目-->
<div class="d2">
<p>图片</p>
<p>首页</p>
<p>计划</p>
</div>
</body>
</html>

效果图:

谢谢大家!!!

Flex 布局教程实例的更多相关文章

  1. Flex 布局教程:实例

    分类: 开发者手册 Flex 布局教程:实例篇   作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Fle ...

  2. Flex 布局教程:语法和实例

    语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便, ...

  3. Flex 布局教程:实例篇【转】

    Flex 布局教程:实例篇   作者: 阮一峰 日期: 2015年7月14日 原文:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html ...

  4. Flex 布局教程:实例篇(转)

    你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solve ...

  5. CSS学习笔记(12)--Flex 布局教程:实例篇

    原文--阮一峰博客 作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只 ...

  6. 二、Flex 布局教程:实例篇

    注:本文转自大神阮一峰,自己加了少许改动~ 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解 ...

  7. (转)Flex 布局教程:

    这个博客的内容比较新,多看看 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html [语法篇] http://www.ruanyifeng. ...

  8. Flex 布局教程转载

    Flex 布局教程:语法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 布局教程:实例篇 http://www.ruan ...

  9. CSS3弹性盒模型,Flex布局教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

随机推荐

  1. 用mybatis将SQL查询语句”select * from user”的封装为配置文件

    用mybatis将SQL查询语句”select * from user”的封装为配置文件 定义一个xml映射文件,文件名见名知意.如user-mapper.xml,文件内容如下: <?xml v ...

  2. 取出List<Map<String,Object>>里面Map的key:value值

    1.取出Map其中一个属性的值 Map map = new HashMap(); map.put("key1", "value1"); map.put(&quo ...

  3. tr 命令详细介绍

    tr用来从标准输入中对字符进行操作,主要用于删除文件中指定字符.字符转换.压缩文件字符. 我们可以用:tr --help查看一下系统详细介绍 [root@bqh-118 scripts]# tr -- ...

  4. Image Processing and Analysis_21_Scale Space:Scale-space filtering——1987

    此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...

  5. Image Processing and Analysis_8_Edge Detection:Learning to Detect Natural Image Boundaries Using Local Brightness, Color, and Texture Cues ——2004

    此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...

  6. 单元测试自动生成工具evosuite

    github地址:https://github.com/EvoSuite/evosuite 官网地址:http://www.evosuite.org   快速开始: 1.  junit  <de ...

  7. 《数据结构与算法之美》 <04>链表(上):如何实现LRU缓存淘汰算法?

    今天我们来聊聊“链表(Linked list)”这个数据结构.学习链表有什么用呢?为了回答这个问题,我们先来讨论一个经典的链表应用场景,那就是 LRU 缓存淘汰算法. 缓存是一种提高数据读取性能的技术 ...

  8. [Python] For 嵌套循环打印图形 nested loop - 练习题

    [python的for循环嵌套打印如下图形] 图形一: ******* ******* ******* ******* 图形二: * *** ***** ******* 图形三: * *** **** ...

  9. PAT Basic 1069 微博转发抽奖 (20 分)

    小明 PAT 考了满分,高兴之余决定发起微博转发抽奖活动,从转发的网友中按顺序每隔 N 个人就发出一个红包.请你编写程序帮助他确定中奖名单. 输入格式: 输入第一行给出三个正整数 M(≤ 1000). ...

  10. 什么是 java 序列化?(未完成)什么情况下需要序列化?(未完成)

    什么是 java 序列化?(未完成)什么情况下需要序列化?(未完成)