flex布局

一、flex布局体验 传统布局与flex布局 传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 flex弹性布局 操作方便，布局极为简单，移动端应用很广泛 PC端浏览器支持情况较差 IE 11或更低版本，不支持或仅部分支持 注意：如果是PC端页面的布局，我们还是传统布局；如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局。 二、flex布局原理 flex是flexible box的缩写，意为 “弹性布局” ，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们为父盒子设为flex布局以后，子元素的float、clear 和 vertical-align属性都将失效。 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性布局 = flex布局 注意：flex布局就是通过父盒子添加flex属性，来控制子盒子的位置和排列方式。 来源： CSDN 作者： chowhoundgh 链接： https://blog.csdn.net/qq_43078424/article/details/104114607

弹性盒子布局(flex布局) 弹性盒子布局方式： .box{ 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。 / 容器属性设置 / 1.flex-direction属性 决定主轴的方向（即项目的排列方向） //水平方向 row(默认值） 主轴方向为水平方向，起点在左端 row-reverse 主轴方向为水平方向，起点在右端 //垂直方向 column 主轴方向为垂直方向，起点在上沿 column-reverse 主轴方向为垂直方向，起点在下沿 2.flex-wrap属性 默认情况下，项目都排在一条线（又称“轴线”）上。 flex-wrap属性定义了

百分比布局 把盒子宽度设置为百分比根据屏幕宽度进行伸缩 min-width max-width magin: 0 auto; background-position flex布局 display: flex flex-direction justify-content flex-wrap控制子元素是否换行,no-wrap不换行 wrap换行 align-items: 设置侧轴上的单行对齐方式 align-content, 设置侧轴上，在多行情况下生效 flex-flow: 子项目属性 flex： 子项目占多少分 align-self: 子项目侧轴排列方式 order:排列顺序 珍惜已有的幸福 来源： CSDN 作者： 叶常落 链接： https://blog.csdn.net/lineuman/article/details/103646950

1. Flex布局 两个属性 ① display : inline-flex 将对象作为弹性伸缩盒展示,用于行内元素 ② display : flex 将对象作为弹性伸缩盒展示,用于块级元素 2. 常用属性 flex-direction : 用于 指定Flex主轴的方向 ,继而决定Flex子项在Flex容器中的位置 取值 : row | row-reverse | column | column-reverse row : 默认值,表示水平方向从左到右排列,此时水平方向轴线为主轴 row-reverse : 与row相反 column : 表示垂直方向从上到下排列,此时垂直方向轴线为主轴 column-reverse : 与column相反 justify-content : 用于 指定主轴(水平方向)上Flex子项的对齐方式 取值 : flex-start | flex-end | center | space-between | space-around flex-start : 默认值,表示与行的起始位置对齐 flex-end : 表示与行的结束位置对齐 center : 表示与行中间对齐 space-between : 表示两端对齐,中间间距相等.要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于flex-start space-around : 表示间距相等

flex布局原理 常见的父项属性 flex-direction设置主轴方向 justify-content 设置主轴上的子元素排列方式 flex-wrap属性 align-items属性 align-content属性 flex-flow属性 常见的子项属性 align-selt属性 hj 来源： https://www.cnblogs.com/Rivend/p/12234661.html

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现；2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有 浏览器 的支持，这意味着，现在就能很安全地使用这项功能。 弹性盒子是 CSS3 的一种新的布局模式，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 : CSS3 弹性盒子内容 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。 1：最基本的 <style> /*body { direction: rtl;/*设置 direction 属性为 rtl (right-to-left), 弹性子元素的排列方式也会改变 ，整体从右到左 }*/ .flex-container{ display: flex; display: -webkit-flex; width: 450px; height:

本文将按照布局类属性、盒模型属性、文本类属性、修饰类属性这四个分类，对CSS常用属性进行重新排列，并最终设置为一份stylelintrc文件 布局类 1、定位 position z-index top bottom left right 2、浮动 float clear 3、多列布局 columns columns-width columns-count column-rule column-fill column-span column-gap 专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧 （从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） 4、栅格布局 // 显示网格 display grid grid-template-rows grid-template-columns grid-column-gap grid-row-gap grid-gap // 网格线 grid-row-start grid-row-end grid-row grid-column-start grid-column-end grid-column grid-area // 隐式网格 grid-auto-rows grid-auto-columns grid-auto-flow grid-template-rows

网页布局（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{ display: -webkit

1、代码规范 2、所谓布局 3、flex容器将消除item的块状特性 flex弹性盒子 4、flex-direction的应用 .container{ display: flex; flex-direction: row; } 5、reverse倒序排布 /* width 100% height:自适应的 */ .container{ display: flex; flex-direction: row-reverse; } 6、 justify-content属性 .container{ display: flex; flex-direction: row-reverse; /* justify-content: center; justify-content: space-between; justify-content: space-around; */ justify-content: flex-end; } 7、主轴与交叉轴 .container{ height:400px ; display: flex; /* 值为 column 竖直方向为主轴 row 水平方向为主轴 */ flex-direction: column; /* 交叉轴上的单对齐 */ align-items:center; /* 主轴上的对齐 */ justify-content: center; }

一提到布局这个词，我总是索索发抖，不是因为天冷，而是因为布局的目标实在太宏大。古代想雄霸天下的王，就喜欢布局这个，布局那个，结果硬生生把自己的国家给布局没了。至于是哪个君王，我倒可以非常认真，非常坦诚地告诉你，那个人不是我，也不是你。 否则我们哪有时间在这里用小程序布局手机界面。一个小小手机界面，就有很多花样，那跟大饼脸脸一样大的平板， 不是需要花费更多功夫？ 其实可以不是的，只要你在布局界面的时候，留多点空白就好了。更最简单的办法，就是全部空白，什么都不放，只是这样的话，老板会让你早点滚蛋。如果不想滚，还是老老实实地布局吧。 4.1 布局 小程序的布局，可从左到右，从上到下；可从右到左，从下到上；可左青龙右白虎，上朱雀下玄武。反正，正反都可以，你喜欢就好。 如果从左到右布局，那就是横向布局；从右到左，那就是反横向布局；如果从上到下，就是纵向布局，从下到上，就是反纵向布局。横纵布局，是古代兵家常用的战略，没想到程序员也懂。开不开心，鸡不鸡冻，嘚不嘚瑟？ 如果你刚刚说开心，说鸡冻，说嘚瑟，那你完了，你高兴得太早了，毕竟小程序布局的技术，Flex都还没开始学，等学会再嘚瑟吧。 Flex是Flexible Box的缩写，意为”弹性布局”，可以支持从左到右，从上到下， 从右到左，从下到上，左青龙右白虎，上朱雀下玄武。 先来左右和上下的，然后，然后就没有然后了。打开index.wxss