flex布局

场景 常见列表左文右图或者左图右文的页面结构 页面结构 <div class="box"> <img src="../img/icon-account.png" alt=""> <p>文字</p> </div> 样式 .box{ width: 100px; height: 100px; line-height: 30px; border: 1px solid #ddd; display: flex; } img{ width: 20px; } 出现的问题 图片的高度不能根据高度自适应，而是充满整个容器 处理方案 给.box 增加align-items：center或者flex-start或者flex-end 都可以，看布局需要 给img增加一个新的容器 <div class="box"> <div><img src="../img/icon-account.png" alt=""></div> <p>文字</p> </div> 来源： https://www.cnblogs.com/bonly-ge/p/11924394.html

使用 可以下载也可以引用,记住 jquery在前面 入门: container, (row,col) bootstrap4使用了flex 在父级盒子应用 flex 可以使元素并排一行,并且 用 flex-gow 是 等分显示 场景针对网页布局某一块区域规划 添加到短语集 没有此单词集：英语 -> 中文（简体）... 创建新的单词集... 拷贝 添加到短语集 没有此单词集：英语 -> 中文（简体）... 创建新的单词集... 拷贝 来源： https://www.cnblogs.com/apelles/p/11921025.html

一、流 式布 局——flex布局 很长一段时间没有写静态页面布局，很多东西都开始模糊了，趁着最近做了一个小项目，把一些静态页面布局的知识简单梳理一下，加深自己的印象 1 .流式 布局的特征 （1）宽度自适应，高度固定，但是不是百分百还原设计图 （2）图标和字体的大小都是固定的，并不是所有的东西都是自适应的 （3）对于大的banner图（主要指轮播图），宽度自适应 2.流式布局的类型 （1）左侧固定，右侧自适应 （2）右侧固定，左侧自适应 （3）两侧固定，中间自适应 （4）等分布局　 3-flex布局（弹性布局、伸缩布局） 给一个盒子设置了属性：display：flex； 则该盒子就变成了一个弹性盒子，而弹性盒子有自己的布局规则 (1)弹性盒子的主轴排列方式 　justify-content——取值：flex-start 、flex-end、center、space-between、space-around 常用取值：space-between 均分对齐排列，两边贴边；space-around 均分对齐排列，不贴边　 （2）flex布局的换行问题 　　flex布局和浮动不同，当多个盒子设置成左或右浮动时，如果一行排放不下时，会自动掉下去。但是flex布局多行排放需要手动设置flex-wrap属性 取值： nowrap默认值，不换行，此时不管有多少的子盒子，都排在一行，盒子越多

布局的传统解决方案，基于 盒状模型 ，依赖 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-flex; /* Safari */ display

关于flex布局的总结 一、起步 把容器指定为 flex容器 任何一个容器都可以指定为Flex 布局。 .box{ display:flex; } 行内元素也可以使用Flex布局。 .box{ display:inline-flex; } 需要注意的是，设为flex布局以后，子元素的float、clear和vertical-align属性将失效 二、然后 容器的所有子元素自动就成了 容器的 item 弄清楚 几个基本的概念 我们知道盒子模型 下面可以理解为 flex 模型 容器默认存在两根轴： * 水平的主轴（main axis）和垂直的交叉轴（cross axis）。 * 主轴的开始位置（与边框 的交叉点）叫做main start，结束位置叫做main end； * 交叉轴的开始位置叫做cross start，结束位置叫做cross end。 * 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 ### 三、容器的属性 以下6个属性设置在容器上: * flex-wrap * flex-flow * justify-content * align-items * flex-direction * align-content flex-wrap: 它可能有四个值 row（默认值）：主轴为水平方向，起点在左端 row

原文 写在前面 flex布局早在2009年就有了，而现在是2015年6月8日，使用最新的flex语法会发现支持程度并不好，即使是在“高端”浏览器上也是如此，比如Chrome、Firefox、Safari、Android、IOS Safari下支持程度各不相同 网上现有的代码中充斥着各种版本，在Chrome下运行一般都没有问题，Firefox一般也还好，但Android与IOS Safari下就显得非常无力了。之所以会出现这样的局面，主要是历史原因，从2009年到2015年，期间W3C规范有了多次更新，浏览器支持程度也就有了差异 一.W3C各个版本的flex 2009 version 标志：display: box; or a property that is box-{*} (eg. box-pack) 2011 version 标志：display: flexbox; or the flex() function or flex-pack property 2012 version 标志：display: flex/inline-flex; and flex-{*} properties 2014 version 新增了对flex项z-index的规定 2015 W3C Editor’s Draft 没有大的改动 P.S.注意2015的是W3C Editor’s Draft

1.实现盒子的水平垂直居中 .parent{ width:200px; height:200px; display:flex; align-items: center; justify-content: center; border:1px solid black; } .child{width:100px;height:100px;background:yellowgreen} <div class="parent"> <div class="child"> </div> </div> 2.子元素水平排列一行，均分父元素宽度(如果采用百分比实现，当子元素个数变化时需要修改样式，用flex布局则不需要) .box{ width:400px; display:flex; border:1px solid black; } .child{ margin:10px;flex:1;background:yellowgreen} <div class="box"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> </div> 3.左侧固定宽度，右侧宽度随父容器宽度变化而变化布局 .box{ /* width:500px; */ display:flex; border:1px

1、移动端的字体 最开始的的方案是： body { font-family: 'Helvetica Neue', Helvetica, 'microsoft yahei', sans-serif; } 升级后的方案： body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif; } 以前iOS版本降级使用 Helvetica。 中文字体设置为华文黑体STHeiTi， iOS 9+ 就开始支持 -apple-system 参数了， Chrome 使用 BlinkMacSystemFont ，兼容 iOS/MacOS。 现在很多设计师的字体都是PingFang，所以这里做了一个兼容。 顺便用"Microsoft Yahei"兼容了一下Window系统。 原生 Android 下中文字体与英文字体都选择默认的无衬线字体。 但是因为安卓系统可以去改系统的默认字体，而且每一个手机厂家也会内置字体，所以直接让他去选择默认的吧。不用单独去折腾安卓的字体了。 2、移动端的适配 移动端的适配方案各个厂商都一套方案，但是现在主流的方案是阿里的flexible，具体可以去看下这篇文章：

注意，设为 Flex 布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。 1.指定flex布局： .box{ display: flex; }行内元素.box{display: inline-flex;} 2.容器的属性： flex-direction：该属性决定主轴的方向（即项目的排列方向） flex-wrap：该属性定义，如果一条轴线排不下，如何换行 flex-flow：该属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap justify-content：该属性定义了项目在主轴上的对齐方式 align-items：该属性定义项目在交叉轴上如何对齐 align-content：该属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用 3.常用属性的使用 ①div的垂直居中 ②flex-flow换行 nowrap （默认）：不换行 wrap ：换行，第一行在上方 wrap-reverse ：换行，第一行在下方 ③ flex-grow 属性定义项目的放大比例，默认为 0 ，即如果存在剩余空间，也不放大。 来源： https://www.cnblogs.com/Ky-Thompson23/p/11888662.html

弹性盒模型的一些知识 一、简单介绍     弹性盒模型（ Flexible Box或FlexBox）是一个CSS3新增布局模块，官方称为CSS Flexible Box Layout Module，用于实现容器里项目的对齐、方向、排序（即使在项目大小位置、动态生成的情况）, 分配空白空间 。弹性盒模型最大的特性在于，能够动态修改子元素的宽度和高度，以满足在不同尺寸屏幕下的恰当布局。 二、基本知识     弹性盒子是由弹性容器（flex container）和弹性子元素（flex item）组成，弹性盒子有一个主轴（main axis）和一个纵轴（cross axis），弹性子元素沿着主轴依次排列 ，侧轴垂直于主轴。弹性容器的主轴开始（main start）、主轴结束（main end）和侧轴开始（cross start）、侧轴结束（cross end）代表了弹性子元素排列的起始和结束位置。具体可以看下面的图。 三、属性分类 1. 弹性容器的相关属性 属性 属性说明 flex-direction 设置主轴方向，确定弹性子元素的排列方式 flex-wrap 当弹性子元素超出弹性容器范围时是否换行 flex-flow flex-direction和flex-wrap的快捷方式，复合属性 justify-content 设置弹性子元素主轴上的对齐方式 align-items