flex布局

实战经验，满满的干货 1. 实现一行左右布局 可以在父级中display:flex; justify-content: space-between; 也可在某一个子级flex-grow: 1; text-align: right; 2. align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式 align-self属性是用在单个元素的交叉轴的设置上 3. align-content —针对多行作为一个整体在纵轴上的排列方式，该属性对单行无效 必须对父元素设置属性display:flex，设置排列方式为横向排列flex-direction:row;并且设置换行---- flex-wrap:wrap;这样这个属性的设置才会起作用。 是对父元素进行设置 4.display: inline-block;----可以实现行内布局和块布局，大布局下有好多块，可以设置宽高 5.form组件中的input要有name。input中的type代表弹出的键盘类型 input type=“text” auto-focus name=“name” 在JS中-----var name = e.detail.value.name; //获取姓名输入框内容 6.在success回调函数里是不能直接使用this.setData()的 bindViewTap:

flex： 概念： flex容器： display:flex flex项: 轴:水平的主轴、垂直的交叉轴 容器的属性： 1. flex-direction(决定主轴的方向、即项目的排列方向) 1.1 row(默认值): 主轴为水平方向，起点在左端 1.2 row-reverse: 主轴为水平方向，起点在右端 1.3 column: 主轴为垂直方向，起点在上面 1.4 column-reverse: 主轴为垂直方向，起点在下面 2.flex-wrap(决定如何换行，默认是对item缩放) 2.1 nowrap(默认值)： 不换行 2.2 warp: 换行，第一行在上方 2.3 wrap-reverse: 换行，第一行在下方 3.flex-flow(flex-direction、flex-wrap的简写) 3.1 <felx-direction> || <flex-wrap> 4.justify-content(item在主轴上的对齐方式) 4.1flex-start: 左对齐 4.2flex-end: 右对齐 4.3center: 居中 4.4space-between: 两端对齐,每个项目之间间隔相等 4.5space-around: 每个项目的两侧间隔相等 5.align-items(定义项目在交叉轴上如何对齐) 5.1strech(默认值)： 如果项目未设置高度或为auto

1.基本概念： 　　采用flex布局的元素称为flex容器。 　　容器默认存在两根轴：水平的主轴：main axis 主轴的开始位置，与边框的交叉点：main start 结束位置：main end 　　　　　　　　　　　　垂直的交叉轴：cross axis 交叉轴开始的位置：cross start 结束位置：cross end 2.容器的属性 　　flex-direction 主轴的方向 　　　　flex-direction：row（水平方向，起点为左端）|row-reverse（水平方向，起点为右端）|column（垂直方向，起点在上）|column-reverse（垂直方向，起点在下） 　　flex-wrap 如果项目一条轴线排不下 　　　　flex-wrap：nowrap（不换行 默认）|wrap（换行，在原行下方）|wrap-reverse（换行，在原行上方） 　　flex-flow 　　　　flex-flow：<flex-direction>||<flex-wrap> 　　justify-content 项目在主轴上的对齐方式 　　　　justify-content：flex-start（左对齐）|flex-end（右对齐）|center（居中）|space-between（两端对齐）|space-around：每个项目间隔相等 　　align-items

简要理论陈述 1、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器（其中包括行内inline-flex）都可以指定为Flex布局。 2、采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 3、容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 常用属性及相应解释 添加到父容器上 1、 display : flex; 2、 flex-direction: row; 布局的排列方向 （主轴排列方向） row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。 row-reverse 显示为行。但方向和row属性值是反的 column 显示为列 column-reverse 显示为列。但方向和column属性值是反的 3、flex-wrap : nowrap; 是否进行换行处理。

网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于 盒状模型 ，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如， 垂直居中 就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、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），简称”项目”。

一、flex简要概念 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度（和排列顺序），从而能够最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。flex布容器能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出 二、display：flex 在父项添加的属性值 flex-direction:布局的排列方向 （主轴排列方向） row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。（1 2 3 4） row-reverse 显示为行。但方向和row属性值是反的（4 3 2 1） column 显示为列 column-reverse 显示为列。但方向和column属性值是反的 flex-wrap : 是否进行换行处理。 nowrap; 默认值，不换行处理 wrap; 换行处理 wrap-reverse; 反向换行 justify-content ; 属性 决定了主轴方向上子项的对齐和分布方式。 flex-start ： 子项都去起始位置对齐。(默认值) flex-end ： 子项都去结束位置对齐。 center ： 子项都去中心位置对齐。

常用的后台布局方式。左侧固定，右侧宽度自适应屏幕。 实现方式 BFC。运用 BFC 不和 float 块重叠的特点 position 布局。right 块 absolute,让 left 为right的宽度 自适应布局。right 不设置宽度。用 margin 撑开左边边距。 flex 布局。right 设置 flex=1.left 设置 flex-shrink:0; 运用 css 函数 calc。自动计算右侧的宽度。设置 right 的 width:calc(100% - left.width)。 代码实现 <div class="float-box"> <div class="aside"></div> <div class="main"></div> </div> BFC .float-box { position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; overflow: hidden; } postion 布局 .float-box { position: relative; } .aside { width: 100px; height: 150px; float

一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticle-align: center 是否可行呢？答案也是否定的。这两个属性只能用于行内元素，对于块级元素的布局是无效的。 在网页布局没有进入 CSS 的时代，排版几乎是通过 table 元素实现的，在 table 的单元格里可以方便的使用 align、valign 来实现水平和垂直方向的对齐，随着 Web 语义化的流行，这些写法逐渐淡出了视野，CSS 标准为我们提供了 3 种布局方式：标准文档流、浮动布局和定位布局。这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求，比如实现水平居中可以使用 margin: 0 auto，实现水平垂直同时居中可以如下设置： .dad { position : relative ; } .son { position : absolute ; margin : auto ; top : 0 ; right : 0 ; bottom : 0 ; left : 0 ; } .dad {

有的时候一个页面内容高度不够，底部则需要在页面的最下方，内容足够的时候，页面和底部也随之滚动 解决方案 html <div class="index"> <div class="container"> <!-- 你的页面内容 --> </div> <div class="foot"> <!-- 需要自适应的底部内容 --> </div> </div> css .index{ /* 设置父元素为flex布局 */ display: flex; /* 设置子元素的排列方向 */ flex-direction: column; /* 设置子元素在该方向上的对齐方式 */ justify-content: space-between; } 来源： CSDN 作者： 我是蓝格子yeye 链接： https://blog.csdn.net/qq_35168861/article/details/104551771

原作者： 阮一峰 网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于 盒状模型 ，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便， 比如， 垂直居中 就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了 所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex 布局将成为未来布局的首选方案。本文介绍它的语法， 下一篇文章 给出常见布局的 Flex 写法。网友 JailBreak 为本文的所有示例制作了 Demo ，也可以参考。 以下内容主要参考了下面两篇文章： 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{