flex布局

移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 1.2 flex布局 操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局，还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 flex布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 总结 ：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 3.0 父项常见属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content

@ HelloZxy9527 flex弹性布局的使用 关于弹性布局的简介 在之前的学习中，对页面布局有了大概的了解，发现许多页面的布局都是遵循几个盒子水平排列，或是竖直排列；竖直排列还好，水平方向则需要使用float属性，在加上设置间隔等，代码繁多，且容易混淆。而flex弹性布局则良好的解决了这个问题。 基本概念 1.容器：需要添加弹性布局的父元素 2.项目：弹性布局容器的每一个子元素，称为项目 3.主轴：在弹性布局中，我们会通过属性规定水平/垂直主轴 使用方法 1.给父容器添加display：flex属性，即可使容器内容采用弹性布局显示，而不遵循常规流的显示方式； display:flex; 2.容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流。 3.display：flex；容器添加弹性布局后，显示为块级元素；display：inline-flex；容器添加弹性布局后，显示为行级元素。 4.设为flex布局后，子元素的float属性将失效。但是postion属性，依然生效。 作为父容器的几大属性 1.flex-direction属性决定主轴的方向（即项目的排列方向）; flex-direction : row ; /*主轴为水平方向，起点在左端；*/ flex-direction : row-reverse ; /*主轴为水平方向

css3 flex 实现常见页面布局 上中下布局 左中右三列布局 圣杯布局 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{display:flex;} 行内元素也可以使用Flex布局。 .box{display:inline-flex;} Webkit内核的浏览器，必须加上-webkit前缀。 .box{display:-webkit-flex;/* Safari */display:flex;} 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 上中下布局 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "utf-8" > < title > flex 布局 < / title > < style type = "text/css" > * { padding : 0 ; margin : 0 ; } header { height : 200 px ; background : # C4DFEB ; } footer { height : 200 px ; background : pink ; } . container { display :

一、概念 弹性盒模型是css3的一种新的布局方式，是一种当前页面需要适应不同的屏幕大小及设备类型时确保拥有恰当的行为的布局方式。 二、目的 引入盒模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列，对齐和分配空白空间。 三、内容 弹性盒子由弹性容器和弹性子元素组成 性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器 弹性容器内包含了一个或多个子元素 flex-flow flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为（row nowrap） justify-content 定义了项目在主轴上的对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around; flex-start（默认值）： 左对齐 flex-end： 右对齐 center： 居中 space-between： 两端对齐，项目之间的间隔都相等。 space-around： 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 justify-content align-items 属性定义项目在交叉轴上如何对齐 align-items: flex-start | flex-end |

Hello,everyone ! 想以一个轻松愉悦的心情来开始我的每一篇文章。 这是每一次的整理和缩影，希望大家可以发表意见，促进成长。 一.盒模型 概念 CSS盒模型本质上是一个盒子，封装周围的HTML元素，是由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。 W3C盒子模型（标准盒模型） 根据 W3C 的规范，元素内容占据的空间是由width属性设置的，而内边距（padding） 和边框（border）值是另外计算的。 IE盒子模型（怪异盒模型） 在该模式下，设置 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。 box-sizing box-sizing可以指定盒模型的种类，content-box以及border-box。content-box与border-box的区别在于盒模型的宽高计算方式不一样。 content-box 说明：在内容宽度和高度之外绘制内边距和边框 border-box 说明：在已设定的宽度和高度之内绘制设定元素的边框及内边距 代码如下： .content-box{ width: 100px; height: 100px; border: 1px solid; padding: 0px 10px; box-sizing: content-box; } .border-box{ box

flex布局 容器的属性 flex-direction属性 flex-wrap属性 flex-flow属性 justify-content属性 align-items属性 align-content属性 flex布局 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上 -webkit 前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意，设为 Flex 布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。 容器的属性 以下6个属性设置在容器上。 flex-direction flex-wrap flex-flow justify-content align-items align-content flex-direction属性 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 flex-direction 属性决定主轴的方向（即项目的排列方向）。 row （默认值）：主轴为水平方向

CSS3弹性盒布局方式 一、CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 二、CSS3弹性盒模型常用的属性 属性 描述 flex-direction 指定弹性容器中子元素排列方式 flex-wrap 设置弹性盒子的子元素超出父容器时是否换行 flex-flow flex-direction 和 flex-wrap 的简写 align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式 align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式 1. flex-direction 属性 决定项目的方向。 注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。 属性值 值 描述 row 默认值。元素将水平显示，正如一个行一样。 row-reverse 与 row 相同，但是以相反的顺序。 column 元素将垂直显示，正如一个列一样。

【弹性布局】 1、了解两个概念 容器：需要添加弹性布局的父元素； 项目：弹性布局容器中的每一个子元素，称为项目。 2、弹性布局的使用 ①给父容器添加display：flex/inline-flex；属性，即可以式容器内采用弹性布局显示，而不遵循常规文档流的显示模式； ②容器添加弹性布局后，仅仅是容器内采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流方式； ③display：flex；容器添加弹性布局后，显示为块级元素； ④display： inline-flex；容器添加弹性布局后，显示为行级元素； 设为弹性布局后，子元素的float、clear、vertical-align属性将失效，但是position属性，依然生效。 【容器作用于容器的相关属性】 1、flex-direction属性决定主轴的方向（即项目的排列方向）。 row（默认值）：主轴为水平方向，起点在左端； row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 2、flex-wrap属性定义，如果一条轴线排不下，如何换行。 （1）nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压。 （2）wrap：换行，第一行在上方。 （3）wrap-reverse：换行，第一行在下方。 3、flex

作者： 阮一峰 网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于 盒状模型 ，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如， 垂直居中 就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局将成为未来布局的首选方案。本文介绍它的语法， 下一篇文章 给出常见布局的Flex写法。 以下内容主要参考了下面两篇文章： A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties 。 一、Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 . box { display : flex ; } 行内元素也可以使用Flex布局。 . box { display : inline - flex ; } Webkit内核的浏览器，必须加上 -webkit 前缀。 . box { display : - webkit - flex ; /* Safari */ display

PC端常见的布局技术: 1. margin:0 auto ; 自动居中 2. text-align /vertical-align 和line-height 3. float:left/right +overflow:hidden 浮动 4. display:table/table-cell /inline-block 通过转换元素的属性来实现布局 5. 固定定位\相对定位\绝对定位 及配合z-index 来实现布局 6. CSS3新特性:flex 弹性布局 7. 响应式布局:viewport +” width=width-device ” +后边的媒体查询技术 8. 框架:bootstrap 的栅栏布局 以下文章摘自： https://segmentfault.com/a/1190000003931851 一、 单列布局 1.1 水平居中 水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素） ① 使用inline-block 和text-align实现 .parent { text-align : center ; } .child { display : inline-block ; } ② 使用margin:0 auto来实现