之前的随笔从阮一峰老师那里学到了flex的基本用法及作用,现在来把flex具体运用到实例中,看看flex的弹性布局效果。

1.  flex设置元素垂直居中对齐

在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现

HTML代码:

<div class="demo">
<div class="inner">
<p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>
</div>
</div>

CSS代码:

.demo{
width: 500px;
height: 300px;
border: 1px solid purple;
display: flex; /*设置为flex布局*/
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
.inner{
width: 160px;
height: 160px;
font-size: 26px;
border: 1px solid red;
}

效果如图:

2. 用flex布局制作导航栏

以前在写导航栏的时候,总是用float或者display:inline-block实现,但是这两种方法都会有各种问题,比如浮动会影响父元素以及兄弟元素的样式,需要清除浮动

现在用flex会很方便,并且是弹性布局

HTML代码:

<ul>
<li>音乐</li>
<li>影视</li>
<li>旅游</li>
</ul>

CSS代码:

ul{
display: flex;
}
li{
flex:;
text-align: center;
line-height: 100px;
}

效果如图所示:

我们只要在HTML代码里面多加两个li元素,导航便弹性变化

不需要改变css代码,即可在导航栏中增加项目

3. 有时候需要做成左图右文字的样式,如下图所示:

此时用flex会很方便

HTML代码:

<div class="demo">
<div class="left"></div>
<div class="right">
<p>Iphone7 PLUS XXXXXXXXXX</p>
<span>总人数99</span>
<span>剩余人数33</span>
<div class="btn">立即参与</div>
</div>
</div>

CSS代码:

.demo{
display: flex; /*设置为flex布局*/
justify-content: space-around;
}
.demo > div{
flex: none;
}
.left{
width: 200px;
height: 200px;
background: #d4cdcd;
}
.right{
width: 380px;
height: 200px;
}

甚至有多列布局,

HTML代码:

<div class="demo">
<div class="left"></div>
<div class="center">
<p>description</p>
<p>description</p>
<p>description</p>
<span>description</span>
</div>
<div class="btn">确认</div>
<div class="btn">取消</div>
</div>

CSS代码:

.demo{
width: 600px;
height: 150px;
border: 1px solid #b7b2b7;
margin: 30px auto;
padding-top: 17px;
display: flex; /*设置为flex布局*/
justify-content: space-around;
}
.demo > div{
flex: none;
}

4. 固定百分比布局:

HTML代码:

<div class="demo">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>

(1) 等分布局:

CSS代码:

.demo{
display: flex;
}
.item{
flex:;
}

(2)某一个固定

CSS代码:

.demo{
display: flex;
}
.item{
flex:;
}
.item2{
flex: 0 0 50%;
}

(3)某两个固定

CSS代码:

.demo{
display: flex;
}
.item{
flex:;
}
.item2{
flex: 0 0 50%;
}
.item4{
flex: 0 0 20%;
}

(4)三个固定

CSS代码:

.demo{
display: flex;
}
.item{
flex:;
}
.item1{
flex: 0 0 10%;
}
.item2{
flex: 0 0 50%;
}
.item4{
flex: 0 0 20%;
}

5.  圣杯布局,如图所示

HTML代码:

<div class="demo">
<div class="header">头部</div>
<div class="body">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">底部</div>
</div>

CSS代码:

.demo{
display: flex;
flex-direction: column;
}
.demo div{
flex:;
}
.body{
display: flex;
}
.header,.footer,.left,.right{
flex: 0 0 20%!important;
}

6.  输入框布局,有时需要在输入框的前部添加提示,或者后部添加按钮,如图所示:

HTML代码:

<div class="demo">
<span class="tip"></span>
<input type="text" name="" />
<button>search</button>
</div>

CSS代码:

.demo{
display: flex;
}
input{
flex:;
}

7.  底部footer固定在底部,但是不是fixed定位

页面会经常用到固定的底栏,但是当页面内容过少时,footer会到页面中间,下面用flex来解决

HTML代码:

<div class="demo">
<div class="main">这是主要内容</div>
<div class="footer">这是底部</div>
</div>

CSS代码:

.demo{
display: flex;
flex-direction: column;
}
.main{
flex:;
}
.footer{
width: 100%;
height: 120px;
}

8.  流式布局 ,如下如所示:

HTML代码如下:

<div class="demo">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

CSS代码:

.demo{
width: 258px;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.item{
flex: 0 0 33.333333%;
height: 80px;
box-sizing: border-box;
}

参考文档:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

by新手小白的纪录

flex的使用实例的更多相关文章

  1. 杂项(乌班图、flex的使用实例)

    查看乌班图当前系统版本:lsb_release -a 转载于博客园:flex的使用实例

  2. Flex之柱状图实例

    Flex之柱状图实例 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns ...

  3. Flex 布局教程实例

    Flex 布局教程实例 一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 F ...

  4. CSS3新属性之---flex box布局实例

    flex box布局实例 flex的强大之处在于不管什么布局,几行命令即可实现 /*本节模板div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目.如果有多个项目,就要 ...

  5. Flex 布局教程:实例

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

  6. flex布局语法+实例

    一.什么是flex布局 flex 是 flexible box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 flex 布局.你可以将前端页 ...

  7. Flex 布局:实例篇

    上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. ​ 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇& ...

  8. flex布局--小实例

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

  9. flex简单参考实例

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

随机推荐

  1. Python单元测试--unittest(一)

    unittest模块是Python中自带的一个单元测试模块,我们可以用来做代码级的单元测试. 在unittest模块中,我们主要用到的有四个子模块,他们分别是: 1)TestCase:用来写编写逐条的 ...

  2. IDE看代码,挺好

    初学编程的时候总是收到各种警告:“刚学习编程千万不要用IDE,否则会有xxxxxx的后果”.现在工作后发现使用IDE可以方便编写和查看代码,对于较大的项目来说有很多代码,代码之间的关系也比较复杂,ID ...

  3. MySQL事务、并发问题、锁机制

    MySQL事务,并发问题,锁机制 1.什么是事务 事务是一条或多条数据库操作语句的组合,具备ACID,4个特点. 原子性:要不全部成功,要不全部撤销 隔离性:事务之间相互独立,互不干扰 一致性:数据库 ...

  4. 451. Swap Nodes in Pairs【LintCode java】

    Description Given a linked list, swap every two adjacent nodes and return its head. Example Given 1- ...

  5. MySQL-MMM方案

    参考文档: 官方文档:http://mysql-mmm.org/mmm2:guide 本文对mmm方案做简单介绍,并做1个简单的验证. 一.MySQL-MMM方案 1. MMM方案简介 MMM(Mul ...

  6. Catch That Cow:BFS:加标记数组:不加标记数组

    Catch That Cow Problem Description Farmer John has been informed of the location of a fugitive cow a ...

  7. 剑指 Offer——和为 S 的两个数字

    1. 题目 2. 解答 由于数组是已经排好序的,我们可以定义两个指针,第一个指针指向第一个元素,第二个指针指向最后一个元素,然后求出这两个元素的和,与目标和进行比较.若小于目标和,第一个指针向前移动: ...

  8. 【Python入门学习】闭包&装饰器&开放封闭原则

    1. 介绍闭包 闭包:如果在一个内部函数里,对在外部作用域的变量(不是全局作用域)进行引用,那边内部函数被称为闭包(closure) 例如:如果在一个内部函数里:func2()就是内部函数, 对在外部 ...

  9. A Product Recall 产品召回

    Rick: The Board of Directors has come to a decision. Our company will take an image hit, and it's go ...

  10. [python][odlboy]设置字符串打印的颜色

    格式:\033[显示方式;前景色;背景色m 说明:前景色            背景色           颜色---------------------------------------30    ...