flex布局

伸缩布局（CSS3）

阅读更多关于伸缩布局（CSS3）

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

深入理解CSS中的层叠上下文和层叠顺序

阅读更多关于深入理解CSS中的层叠上下文和层叠顺序

深入理解CSS中的层叠上下文和层叠顺序上下文前端大全 · 2016-01-20 20:12 (点击上方公众号，可快速关注) 作者：张鑫旭网址：http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零、世间的道理都是想通的在这个世界上，凡事都有个先后顺序，凡物都有个论资排辈。比方说食堂排队打饭，对吧，讲求先到先得，总不可能一拥而上。再比如说话语权，老婆的话永远是对的，领导的话永远是对的。在CSS届，也是如此。只是，一般情况下，大家歌舞升平，看不出什么差异，即所谓的众生平等。但是，当发生冲突发生纠葛的时候，显然，是不可能做到完全等同的，先后顺序，身份差异就显现出来了。例如，杰克和罗斯，只能一人浮在木板上，此时，出现了冲突，结果大家都知道的。那对于CSS世界中的元素而言，所谓的“冲突”指什么呢，其中，很重要的一个层面就是“层叠显示冲突”。默认情况下，网页内容是没有偏移角的垂直视觉呈现，当内容发生层叠的时候，一定会有一个前后的层叠顺序产生，有点类似于真实世界中论资排辈的感觉。而要理解网页中元素是如何“论资排辈”的，就需要深入理解CSS中的层叠上下文和层叠顺序。我们大家可能都熟悉CSS中的z-index属性，需要跟大家讲的是，z

快速搞懂flex

阅读更多关于快速搞懂flex

转载自知乎 https://zhuanlan.zhihu.com/p/25303493 为什么我要写这一篇关于 Flex 布局的教程？因为它十分简单灵活，区区简单几行代码就可以实现各种页面的的布局，以前我在学习页面布局的时候我深受其 float、display、position 这些属性的困扰。然而学习 Flex 布局，你只要学习几个 CSS 属性，就可以写出简洁优雅复杂的页面布局。本教程适合人群：前端小白，不太明白页面布局技巧，但想通过简单的学习学会如何进行页面布局学过但是不太熟悉 Flex 布局，需要教程来巩固回顾 Flex 布局的知识点项目不考虑兼容 IE 低版本浏览器，想简单优雅地写出漂亮的页面布局废话就不多说了，我将尽可能地用简洁明了的言语来描述 Flex 布局，看完你会收获的。 Flex 基本概念：在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。这里需要强调，不能先入为主认为宽度就是 main size，高度就是 cross size

小程序新增页面导航栏

阅读更多关于小程序新增页面导航栏

display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 flex-direction:column; 让元素沿垂直主轴从上到下垂直排列 .navbar{background：white}：导航栏背景颜色为白色 .navbar .item：对导航栏中字体的设置，以及导航栏内元素空间如何分配 flex: auto：导航栏内元素空间弹性分配 flex:1 ：导航栏内元素空间等分 { position: relative;相对定位 position: absolute;绝对定位例如先 relative 后absolute，则absolute的部分根据relative进行定位 } .navbar .item.active：导航栏里的字体颜色 .navbar .item.active:after：选中导航栏中的某一栏是，这一栏下边界所显得颜色来源： https://www.cnblogs.com/mitang0-0/p/11734546.html

flex伸缩布局

阅读更多关于 flex伸缩布局

重要性：布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。 1、重要属性 display:flex :如果父容器设置了这个属性，那么这个盒子里面的所有直接子元素都会自动的变成伸缩项(flex item)===当子元素的宽度和大于父容器宽度的时候，子元素会自动平均收缩 justify-content : 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式,语法：justify-content：flex-start | flex-end | center | space-between | space-around flex-start ：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。（让子元素从父容器的起始位置开始排列） flex-end ：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。（让子元素从父容器的结束位置开始排列） center ：

css之弹性盒模型

阅读更多关于 css之弹性盒模型

　　弹性盒子（Flexible Box/filebox）是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。　　弹性盒子由弹性容器（父元素）和弹性子元素（可以一个或者多个）组合而成。弹性容器通过设置display属性的值为flex或者是inline-flex将其定义为弹性容器。一、display:flex　　　　　作用：让当前元素形成盒，控制子元素。　　　　特点：弹性盒里的子元素，都是沿着主轴排列，默认情况下，主轴为X轴。弹性盒里的子元素都能直接添加宽高（不用在乎是块元素还是行内元素）。让弹性盒里的一个子元素左右上下居中，直接给子元素添加margin:auto ;就可。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> section{ display: flex; } span{ width: 100px; height: 100px; background-color: green; margin: auto; } </style> </head> <body> <section> <span><

flex布局属性说明

阅读更多关于 flex布局属性说明

flex布局又称为盒子布局或弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。给父容器添加display: flex/inline-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。容器最核心的6个属性：项目的6个核心属性：来源： https://www.cnblogs.com/fengyuexuan/p/11726536.html

微信小程序文档学习4-9章

阅读更多关于微信小程序文档学习4-9章

在小程序开发中，我们需要考虑各种尺寸终端设备上的适配。在传统网页开发，我们用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现。这种情况下，我们更建议用flex布局在开始介绍flex之前，为了表述方便，我们约定以下术语：采用flex布局的元素，简称为“容器” ，在代码示例中以 container 表示容器的类名。容器内的元素简称为 “项目” ，在代码示例中以item表示项目的类名在不固定高度信息的例子中，我们只需要在容器中设置以下两个属性即可实现内容不确定下的垂直居中。 .container{ display: flex; flex-direction: column; justify-content: center; } 来源： https://www.cnblogs.com/Py-king/p/11726028.html

阅读更多关于 flex布局

网页布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案 - Flex布局，可以简便、完整、响应式地实现各种页面布局。已经得到了所有浏览器的支持，最近刚刚发布的小程序则广泛使用了flx布局， Flex布局将成为未来布局的首选方案。本视频教程讲详细讲解flex布局的方方面面。 Flex布局是什么？ Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 .box{display: flex;} 行内元素也可以使用Flex布局。 .box{display: inline-flex;} Webkit内核的浏览器，必须加上-webkit前缀。 .box{ display:-webkit-flex; display:flex;} 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。基本概念采用Flex布局的元素，称为Flex容器（flex container）。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴

CSS3——伸缩布局及应用

阅读更多关于 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 水平排列 http://m.ctrip.com/html5/ 携程网手机端地址 3、justify-content调整主轴对齐（水平对齐）子盒子如何在父盒子里面水平对齐 4、align-items调整侧轴对齐（垂直对齐）子盒子如何在父盒子里面垂直对齐（单行） 5

订阅 flex布局