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属性将失效。 基本概念 采用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布局 ，可以使布局更加简单。 双飞翼布局和圣杯布局虽然实现方式有所差异，但是基本上都遵循了以下几点： 两侧宽度固定，中间宽度自适应 中间结构在DOM上优先，以便于优先渲染 下面依次介绍圣杯布局、双飞翼布局、弹性布局实现三栏布局 圣杯布局 一、搭建主体结构 我们先搭建主体框架，将主体结构写出来 <div class="header"></div> <div class="container"></div> <div class="footer"></div> 我们将为左右预留出一定的空间，作为左右固定两栏的位置 .container{ padding-left:200px; padding-right:150px; } 这时，我们的主体结构变成这样了 二、添加中、左、右三列 接下来我们将左、中、右三列添加到主体框架中 <div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div>

开发过程中，很多布局，用antd的栅格还是不灵活，flex弹性布局会更好用 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 注意，设为 Flex 布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。 容器属性 flex-direction 排列方向 flex-wrap 排不下，如何换行 flex-flow 1和2的简写 justify-content 主轴对齐 align-item 交叉轴对齐 align-content 多轴线对齐 项目属性 order 数值越小，越靠前 flex-grow 项目放大 flex-shrink 项目缩小 flex-basis 定宽或定高（同事说他面试都会问一个问题，两列，一列定宽，但是不能用width定义，另一列自适应，怎么写，就用这个属性） flex 2/3/4的简写 align-self 单个项目与其他项目不一样的排列方式，下次写代码可以试试这个 以下为拿来即用公用flex类 .display_none { display: none !important; } .visibility_hidden { visibility: hidden; } /* 交叉轴左对齐 */ .flex_top { display: -webkit-flex;

微信小程序 View 支持两种布局方式：Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明(给父元素)： display : flex ; 下面就来介绍下微信小程序的 Flex 布局 先做一个简单的 demo < view class = " main " > < view class = " item item1 " > 1 </ view > < view class = " item item2 " > 2 </ view > < view class = " item item3 " > 3 </ view > </ view > 加上背景色能看的更清楚些 .main { width : 100% ; background-color : antiquewhite ; } .item { height : 100rpx ; width : 100rpx ; } .item1 { background-color : red ; } .item2 { background-color : dodgerblue ; } .item3 { background-color : greenyellow ; } 然后大概是这个样子的： 然后给 .main (父元素)加上 display: flex 样式属性 好使用 flex 布局

微信小程序自己开发了一套 wxml + wxss，对许多 HTML 标签和 CSS 属性不支持。 不支持 table 标签，推荐使用 flex 布局。 自然而然的想法：flex 嵌套，效果还不错，贴代码如下： < view id ="panel" class ="flex-column" > < view class ="flex-cell flex-row" > < text class ="flex-cell flex-row" > 1 </ text > < text class ="flex-cell flex-row" > 2 </ text > < text class ="flex-cell flex-row" > 3 </ text > < text class ="flex-cell flex-row" > 4 </ text > </ view > < view class ="flex-row flex-cell" > < text class ="flex-cell flex-row" > 1 </ text > < text class ="flex-cell flex-row" > 2 </ text > < text class ="flex-cell flex-row" > 3 </ text > < text class ="flex-cell

1flex布局的基本概念 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size 。 2、flex容器的基本属性 flex-direction　　容器内项目的排列方向(默认横向排列)　　 flex-wrap　　容器内项目换行方式 flex-flow　　以上两个属性的简写方式 justify-content　　项目在主轴上的对齐方式 align-items　　项目在交叉轴上如何对齐 align-content　　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 1.flex-directon属性：表示项目的排列方式或者说主轴的方向，有以下四个值 row:默认值，主轴为水平方向，从左向右排列 row-reverse:主轴为水平方向，从右向左排列 column:主轴为垂直方向

网页布局（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 : flex ; } 注意，设为Flex布局以后

什么是flex布局 flex是flexible Box的缩写，意味“弹性盒子”，用来为盒子状模型提供最大的灵活性 任何一个盒子都可以指定为flex布局 .box{ display:flex } 行内元素也可以使用flex布局 .box{ dispaly:inline-flex } Webkit内核的浏览器，必须加上-webkit前缀 display: -webkit-flex; /* Safari */ display: flex; 当我们为父盒子设置了flex布局之后，子元素的float，clear和vertical-align就失效了 传统布局和flex布局的差别 pc端的兼容较差，IE11或者更低的版本，不支持或者仅部分支持 所以： pc端页面布局，建议任然使用传统布局 移动端或者不考录兼容性问题的PC端桌面布局，仍然使用flex弹性布局 flex布局初体验 首先，行内元素是不能设置宽高的，如span 但是，我们一旦给了父级元素设置了 display：flex 那行内元素也能设置宽高 div{ display: flex; width: 80%; height: 300px; background-color: pink; } div span{ margin-right: 10px; width:150px; height: 100px; background-color:

2009年，W3C提出了一种新的方案--Flex布局，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。 .box{ display:flex } 结构示意图 容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。 main start/main end：主轴开始位置/结束位置； cross start/cross end：交叉轴开始位置/结束位置； main size/cross size：单个项目占据主轴/交叉轴的空间； 设置在容器上的属性有6种： 1.flex-direction 2.flex-wrap 3.flex-flow 4.justify-content 5.align-item 6.align-content flex-direction属性：决定主轴的方向（即项目的排列方向） .box { flex-direction: row | row-reverse | column | column-reverse; } row（默认）：主轴水平方向，起点在左端； row-reverse：主轴水平方向，起点在右端； column：主轴垂直方向，起点在上边沿； column-reserve：主轴垂直方向，起点在下边沿。 flex-wrap属性：定义换行情况 .box{ flex-wrap

flex的使用实例 之前的随笔从阮一峰老师那里学到了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实现