flex布局

React-Native flex 布局使用总结 父视图属性(容器属性)： flexDirection : 对子布局方向的设置 row : 从左到右依次排列 row-reverse :从右向左依次排列 column:(default) 从上到下排列 column-reverse :从下到上排列 flexWrap: 定义子布局是否在父布局中多行排列 wrap: 允许多行排列 nowrap:(defaut) 不允许多行排列 justifyContent : 定义子元素之间的排列方式 flex-start:(default) 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。 flex-end: 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。 center: 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。 space-between: 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 space-around: 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 alignItems: 属性以与justify

flex-direction row row-reverse column column-reverse ② flex-wrap nowrap wrap wrap-reverse ③ flex-flow 是 flex-direction flex-wrap flex-flow: row wrap; 不做过多解释 ④ justify-content >>> row-row-reverse- column-column-reverse- flex-start flex-end center space-between() space-around() space-evenly ⑤ align-items flex-start flex-end center baseline: () stretchauto ⑥ align-content (align-contentalign-items) flex-start flex-end center space-between space-around stretch 来源：博客园 作者： 宇宙super大可爱 链接：https://www.cnblogs.com/hzwbw/p/11525724.html

伸缩布局(CSS3) CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的 方向：默认主轴从左向右，侧轴默认从上到下 主轴和侧轴并不是固定不变的，通过flex-direction可以互换。 Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多 各属性详解 1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配 min-width 最小值 min-width: 280px 最小宽度 不能小于 280 max-width: 1280px 最大宽度 不能大于 1280 2.flex-direction调整主轴方向（默认为水平方向） flex-direction: column 垂直排列 flex-direction: row 水平排列 justify-content调整主轴对齐（水平对齐） 子盒子如何在父盒子里面水平对齐 ֵ 描述 flex-start 默认值。项目位于容器的开头。 flex-end 项目位于容器的结尾。 center 项目位于容器的中心。

一、骰子的布局 骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到 codepen 查看Demo。 如果不加说明，本节的HTML模板一律如下。 <div class="box"> <span class="item"></span> </div> 上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。 1.1 单项目 首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。 .box { display: flex; } 设置项目的对齐方式，就能实现居中对齐和右对齐。 .box { display: flex; justify-content: center; } .box { display: flex; justify-content: flex-end; } 设置交叉轴对齐方式，可以垂直移动主轴。 .box { display: flex; align-items: center; } .box { display: flex; justify-content: center; align-items: center; } .box { display: flex; justify-content:

justify-content justify-content是flex布局中的一个属性，用来调整container中的items布局 flex-start (default): 每个item从起点开始依次排布 flex-end: 每个item从尾部开始依次向起点排布 center: items沿中心排布 space-between: items从左到右依次排布，第一个item在起点，最后一个item在终点 space-around: items从左到右间隔相同距离排布 space-evenly: items从左到右任意连个相邻item的距离与第一个item距起点的距离以及最后一个item距终点的距离都相等 从上到下效果如图： align-items align-item与justify-content相似，也具有多个属性值 flex-start: 每个item上边缘沿着container的上边缘线分布 flex-end: 每个item下边缘沿着container的下边缘线分布 center: 每个item沿着container的水平中心线分布 baseline: 每个item沿着它们的基准线分布 stretch (default): 每个item延长自己至与container等高分布 从上到下效果如图 注意当flex-direction: colum时，注意方向的变化 来源

本文转载于《 https://blog.csdn.net/lyznice/article/details/53981062 》 转载请标明出处: Flex 弹性盒子布局使用教程 文章来源: Flex 弹性盒子布局使用教程

/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;

1. ѧϰuni-app 号称一次编写多端运行的前端框架，架构图如下 对某些不同平台的特殊功能，可以通过条件进行自动编译，也就是写两套代码，不同的环境会选择不同代码编译 其本身推荐的开发工具是HBuilderX， 官方IDE下载地址 由于一开始我建错目录，删掉重新建过，不断报这个错 文件查找失败：'./pages/info/info/info.vue' at main.js:3 原因就是用HBuilderX新建目录的时候会在 pages.json中添加路径 解决办法就是去掉原来错误的路径 uni-app官方地址 1.4. ϵͳѧϰ 这个看起来比原来的vue麻烦些，通过下面这种方式绑定，输入input内容，text跟着改变 <view class="content"> <input type="text" :value="title" @input="change"/> <text>{{title}}</text> </view> methods: { change(e){ this.title = e.detail.value; } } <block> 横向排列 unshift 数组头部添加元素 /* #ifdef H5 */ height: auto; /* #endif */ flex container：flex容器 flex item：flex项目（元素） flex

布局的传统解决方案，基于 盒状模型 ，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如， 垂直居中 就不容易实现。 需要安卓4.4及以上版本可以使用display:-webkit-flex;，安卓4.4以下使用display:-webkit-box; 如需要更深入了解flex布局，请参考阮一峰博文—— Flex 布局教程：实例篇 现在大部分浏览器都支持flexbox布局方法。react和react-native中几乎全部采用flex来布局。 布局导航菜单： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>flex布局导航菜单</title> 6 <style> 7 body{ 8 background: white; 9 font-family: 'Open Sans', sans-serif; 10 } 11 .main ul{ 12 list-style: none; 13 display: flex; /*<li>元素由垂直排列变成了水平排列。这是因为flex的flex-direction属性的默认值为row*/ 14 } 15 .main li{width:100px;} 16 .main a{ 17

flex盒子模型由容器（flex container）以及容器的直接子元素（flex item）组成。 以容器（flex container）定义，有主轴（main axis）以及交叉轴（cross axis）,主轴的开始位置（与边框的交叉点）叫做main start,结束位置叫做main end.交叉轴的开始位置叫做cross start，结束位置叫做cross end。 （注意:当布局排列方式变化的时候，main axis跟cross axis的方向也会跟着变化,这一点非常重要）主轴(main axis)可以是水平方向,也可以是垂直方向,而交叉轴(cross axis)始终是与主轴垂直 display: flex | inline-flex(适用于父类容器元素上) 定义一个flex容器，内联或者根据指定的值，来作用于下面的子类容器。 box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本2009） flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本2011） flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本） 首先得指定元素是flex布局 块状元素 -> display:flex 行内元素 -> display:inline-flex 例如: .box{ display:flex; } flex-direction(适用于父类容器的元素上)： 确定主轴的方向 flex