flex布局

使用flex布局的容器（flex container），它内部的元素自动成为flex项目（flex item）。容器拥有两根隐形的轴，水平的主轴（main axis），和竖直的交叉轴。主轴开始的位置，即主轴与右边框的交点，称为main start；主轴结束的位置称为main end；交叉轴开始的位置称为cross start；交叉轴结束的位置称为cross end。item按主轴或交叉轴排列，item在主轴方向上占据的宽度称为main size，在交叉轴方向上占据的宽度称为cross size。 　　此外，需注意使用flex容器内元素，即flex item的float，clear、vertical-align属性将失效。 1.flex-direction 　　　　决定主轴的方向，即项目排列的方向，有四个可能的值：row(默认)|row-reverse|column|column-reverse 　　　　row:主轴为水平方向，项目沿主轴从左至右排列 　　　　column：主轴为竖直方向，项目沿主轴从上至下排列 　　　　row-reverse：主轴水平，项目从右至左排列，与row反向 　　　　column-reverse：主轴竖直，项目从下至上排列，与column反向 如下代码 < style > #container { display : flex ; // height :

ѧϰflexbox 需要关注2点，一个是容器，一个是容器内的item ，如果容器设置为flex布局，则容器内的item会自动设置为flex布局，如果没有特意设置为其它样式的话 有main axis 和 cross axis , 取决于flex-direction如何设置，如果设置为row，则main axis就是x轴，水平的；如果设置为column, 则main axis就是y轴，垂直的 justiy-content 属性，用来描述main axis上元素的布局；默认值是flex-start, 主要需要注意的值就是 space-around space-between space-evenly 具体自己练习过就知道不同之处了 使用 margin-left: auto; 来使得main axis上的某一个元素居左或居右，相关的解释说是：渲染的时候，margin-left具体的值，会被一个确定的值替换，具体用法还需要多加理解 flex:1; 它的魔力在哪里呢？我理解的是，随着容器也就是屏幕的拉长grow和压缩shrink，设置该属性的item，都会随之变化，而其他flex container中的item则会显示item本身的宽度大小，不随之变化，事实上，如果容器中只有一个item设置了flex:1，那么这里设置为flex:1 还是 flex:100都是一样的效果；另外

默认情况下，块级元素的内容宽度是其父元素的宽度的100％，并且与其内容一样高。内联元素高宽与他们的内容高宽一样。您不能对内联元素设置宽度或高度――它们只是位于块级元素的内容中。 如果要以这种方式控制内联元素的大小，则需要将其设置为类似块级元素 display: block;。 默认情况下，块级元素在视口中垂直布局――每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。 内联元素表现不一样――它们不会出现在新行上；相反，它们互相之间以及任何相邻（或被包裹）的文本内容位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的文本或元素将向下移动到新行。 position: static; 静态定位是每个元素获取的默认值――它只是意味着将元素放入它在文档布局流中的正常位置。静态定位是默认行为。 position: relative; top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。 position: absolute; 定位的元素应该在文档流中的间隙不再存在，绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。top，bottom，left和right以不同的方式在绝对定位。 它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。 （0,0）位于页面（或元素

了解前端布局的常见几种布局方式对实际开发中有很大的帮助 布局过程常用的css属性：float、position、magin、flex（弹性布局）、transform:translateX等。 具体组合方式可查看下文了解 方法一：margin:0 auto; （最常用的居中布局方式） 方法二：text-align和inline-block的结合（设置父元素的text-align为center）。 这种方式最好应用于图片、按钮、文字之类的居中模式，否则就需要借助inline-block来进行居中布局。 方法三：position绝对定位来实现居中布局。 适用于块级元素不给出宽高的情况下(需要借助transtrom的tanslateX方法)。 #parent { position : relative ; } #child { position : absolute ; top : 0 ; left : 50 % ; transform : translateX(- 50 %) ; -ms-transform : translateX(- 50 %) ; /* IE 9 */ -webkit-transform : translateX(- 50 %) ; /* Safari and Chrome */ } 方法四：left + margin-left 适用于块级元素知道宽度

微信小程序 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 ; } 然后大概是这个样子的： 好使用 flex 布局，主意，貌似 view 不会自动继承，需要在每个想使用的 view 里都加上。 首先是横向布局和竖向布局，要设置属性

FlexboxLayout 本文是 官方文档 的翻译 FlexboxLayout 是一个库项目，能在Android上实现类似 CSS Flexible Box Layout Module 的能力。 添加以下依赖到你的 build.gradle 文件中： dependencies { implementation 'com.google.android:flexbox:1.0.0' } 在布局中有两种方式使用FlexBox FlexboxLayout 第一种是像 LinearLayout 和 RelativeLayout 那样， FlexboxLayout 都是继承了 ViewGroup 。 你可以指定属性在一个布局XML，如： < com.google.android.flexbox.FlexboxLayout xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:app = "http://schemas.android.com/apk/res-auto" android:layout_width = "match_parent" android:layout_height = "match_parent" app:flexWrap = "wrap" app:alignItems = "stretch

<! DOCTYPE html > < html > < head > < meta charset ="utf-8" > < style > .parent { height : 500px ; border : 1px solid #222 ; display : flex ; /* 设为伸缩容器 */ flex-flow : row ; /* 伸缩项目单行排列 */ } .stable { width : 200px ; /* 固定宽度 */ border : 1px solid #ccc ; margin : 20px ; } .change { flex : 1 ; /* 这里设置为占比1，填充满剩余空间 */ border : 1px solid #ff4400 ; margin : 20px ; } </ style > </ head > < body > < div class ="parent" > < div class ="stable" > stable 固定宽度200px </ div > < div class ="change" > changeable 可变宽度 </ div > </ div > </ body > </ html > 文章来源: flex实现经典两栏布局

html代码如下，只是CSS不同： < div class = "wrap" > < div class = "left" >左边宽度固定，高度不定</ div > < div class = "right" >右边自适应，高度不定</ div > </ div > < style > .wrap { font-size : 0 px ; /*通过设置父元素字体大小为0；来消除div之间的空格。或者通过注释,<div>wwww</div><!-- --><div> wwww</div>*/ padding : 20 px ; border : 2 px dashed red ; box-sizing : content-box ; /*父元素是content-box模式*，为了计算右侧盒子的宽度，我们把子元素设置为border-box模式，这样宽度就是整个盒子的宽度了。*/ } .left { box-sizing : border-box ; display : inline-block ; /*两个子元素都设置为inline-block*/ vertical-align : top ; /*两个inline-block的盒子，必须两个子元素都顶端对齐。*/ background : green ; width : 200 px ; height : 500 px ;

最为一个忠实于float跟position的人，确实很少去接触flex，但如果抛开兼容性，猛然发现flex真的好用。 那首先谈谈什么是flex布局？从英文来看，Flexible Box，大多数翻译为弹性布局，语法如下： 元素选择器 { display: flex; } display 属性的值耶！那么跟盒模型有什么关系呢？（对于其他元素类型，如inline，block大家可以自行百度）下面通过一张图来说一下： （备注：此图从http://www.runoob.com/w3cnote/flex-grammar.html这里引用过来的） 主轴（main axis） 是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 。 交叉轴（cross axis） 是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 。 display: flex flex 容器（flex container）。 flex 项 （ flex item <article> flex-direction flex-wrap flex-flow justify-content align-items align-content <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

布局： <div className = {Styles.filterbox} > <div className = {Styles.itme} > <span className = {Styles.control} style ={{ width : '210px' }} > <Input placeholder = "请输入物品名称/品牌" /> </span> </div> <div className = {Styles.itme} > <span className = {Styles.control} style ={{ width : '150px' }} > <Input placeholder = "批号" /> </span> </div> <div className = {Styles.itme} > <span className = {Styles.control} > <span className = {Styles.label} > 有效期至： </span> <DatePicker dateRender = {current => { const style = {}; if (current.date() === 1) { style.border = '1px solid #1890ff'; style.borderRadius = '50