display:flex 布局详解(2)

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

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

HTML代码:

1 <div class="demo">
2   <div class="inner">
3     <p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>
4   </div>
5 </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: 1;
  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: 1;
}

(2)某一个固定

CSS代码:

1 .demo{
2   display: flex;
3 }
4 .item{
5   flex: 1;
6 }
7 .item2{
8   flex: 0 0 50%;
9 }

(3)某两个固定

CSS代码:

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

(4)三个固定

CSS代码:

.demo{
  display: flex;
}
.item{
  flex: 1;
}
.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: 1;
}
.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:1;
}

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: 1;
}
.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;
}

原文地址:https://www.cnblogs.com/yuer20180726/p/11141288.html

时间: 2024-11-03 01:24:24

display:flex 布局详解(2)的相关文章

flex布局详解

1.背景介绍 传统的布局解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局.(di

css篇——flex布局详解

--关于fle布局---常用的还是那几个属性flex-direction,justify-content,align-items, 这两天重现翻阅动手都操作了一遍感觉收获不少现在整理一下,比如align-items属性和align-content属性的区别,比如flex-basis属性order属性有点小收获,如下: 一.Flex 布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.display: flex; 任何一个容器都可

【div+css网页布局详解】

前言: 网页布局是制作一个网页的第一步也是最重要的一步,今天来详细谈一下使用div+css布局的方法. 用dw编写网页的时候是可以通过两种方法的,一是图形界面,二是代码,初学的话可以用图形界面,学的差不多的时候使用代码更能提高效率. 因为现在css3和之前css2有较大改动,咱们先从css2的说起吧. (笔者采用的是dreamweaver cs6,破解版下载地址:http://www.aa25.cn/download/954.shtml) 一.单列布局 一个网页编写手先要搭一个框架,就像下图样:

Anatomy of a Program in Memory—剖析内存中的一个程序(进程的虚拟存储器映像布局详解)

(进程的虚拟存储器映像布局详解) 前言:原文来自于http://duartes.org/gustavo/blog/post/anatomy-of-a-program-in-memory/ 这里只是对其进行翻译,并且重构了原文中的图片.译注则是我增加的内容,用来解释原文或提出问题:由于个人水平有限,译文和译注中的错误之处还请广大坛友提出指正,不胜感激. 下面采用分段中英对照的方式列出内容: Memory management is the heart of operating systems; i

flex:1和flex:auto详解

flex:1和flex:auto详解 首先明确一点是, flex 是 flex-grow.flex-shrink.flex-basis的缩写. flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大. flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小. flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size).浏览器根据这个属性,计算主轴是否有多余空间.它的默认值为auto,即项目的本来大小. 故其

New UI-布局之TableLayout(表格布局)详解

New UI-布局之TableLayout(表格布局)详解  --转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途! 小猪Android开发交流群已建立,欢迎大家加入,无论是新手,菜鸟,大神都可以,小猪一个人的 力量毕竟是有限的,写出来的东西肯定会有很多纰漏不足,欢迎大家指出,集思广益,让小猪的博文 更加的详尽,帮到更多的人,O(∩_∩)O谢谢! 小猪Android开发交流群:小猪Android开发交流群群号:421858269 新Android UI实例大全目录:http://b

C语言的代码内存布局详解

一个程序本质上都是由 BSS 段.data段.text段三个组成的.这样的概念在当前的计算机程序设计中是很重要的一个基本概念,而且在嵌入式系统的设计中也非常重要,牵涉到嵌入式系统运行时的内存大小分配,存储单元占用空间大小的问题. BSS段:在采用段式内存管理的架构中,BSS段(bss segment)通常是指用来存放程序中未初始化的全局变量的一块内存区域.BSS是英文Block Started by Symbol的简称.BSS段属于静态内存分配. 数据段:在采用段式内存管理的架构中,数据段(da

【转载】图说C++对象模型:对象内存布局详解

原文: 图说C++对象模型:对象内存布局详解 正文 回到顶部 0.前言 文章较长,而且内容相对来说比较枯燥,希望对C++对象的内存布局.虚表指针.虚基类指针等有深入了解的朋友可以慢慢看.本文的结论都在VS2013上得到验证.不同的编译器在内存布局的细节上可能有所不同.文章如果有解释不清.解释不通或疏漏的地方,恳请指出. 回到顶部 1.何为C++对象模型? 引用<深度探索C++对象模型>这本书中的话: 有两个概念可以解释C++对象模型: 语言中直接支持面向对象程序设计的部分. 对于各种支持的底层

ExtJs4.1布局详解

Border布局: Ext.onReady(function(){ Ext.QuickTips.init(); Ext.create('Ext.container.Viewport', {   //一般是渲染到viewport中 title: "table布局的面板", layout:'border', defaults: { collapsible: true,  //可收起 split: true, bodyStyle: 'padding:15px' }, items: [{ ti