flex布局

h5-伸缩布局

阅读更多关于 h5-伸缩布局

1.html代码 1 <div class="box"> 2 <div class="first">1</div> 3 <div class="second">2</div> 4 <div class="third">3</div> 5 <div class="fourth">4</div> 6 <div class="fifth">5</div> 7 </div> 2.justify-content:属性：设置子元素的排列方式 1 <style> 2 .box{ 3 width: 1000px; 4 height: 200px; 5 border: 1px solid red; 6 box-sizing: border-box; 7 /*设置为父容器为盒子：会使每一个子元素自动变成伸缩项*/ 8 display: flex; 9 /*设置子元素的排列方式*/ 10 /*flex-start：让子元素从父容器的起始位置开始排列 11 flex-end：让子元素从父容器的结束位置开始排列 12 center：让子元素从父容器的中间位置开始排列 13 space-between：左右对其父容器的开始和结尾，中间平均分页，产生相同过的间距 14 space-around：将多余的空间平均的分页在给每一个子元素的两边 margin：0 auto ：造成中间合资的间距是左右两边盒子间距的两倍

内容不固定三列多行等高布局

阅读更多关于内容不固定三列多行等高布局

之前做过很多多列固定高度的样式，这种三列里面内容是不一样高度的，但是需要展示成跟列表一样，三列多行规规整整的；如果用float进行布局的话，会导致一行只展示两列的情况；如果用display:inline-block;进行行内块的话，会导致瀑布流的情况，没有办法像表格一样根据内容的高度而定；所以我用的flex进行布局可以完美的解决这个问题。 // father ul { display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } // son ul li { width: 33.33%; } 如果解决了你的问题，请给我点个赞哦！来源： https://blog.csdn.net/weixin_45190306/article/details/100020271

前端布局

阅读更多关于前端布局

原文网址： https://www.cnblogs.com/soyxiaobi/p/9594557.html 一、静态布局(Static Layout) 1. 布局概念最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。 2. 优点采用的是css2之前的写法,不存在浏览器兼容性。布局简单。 3. 缺点但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。 4. 实现方法 PC端: 最外层居中,使用固定的宽(高)度,超出部分用滚动条查阅。例如百度首页外层body设置了一个 min-width:1000px; ,当我打开调试器的时候,底部 x轴滚动条就出现了。当然,它的布局比普通的静态布局要复杂地多了,比如推荐模块又是一个流式布局.... 移动端由于静态布局不适用于手机端,所以一般都会另设计一个布局,并使用另一个域名。例如刚刚百度的PC端我们切换成手机模拟器访问试试: 确实有点丑是吧。我们访问一下百度的手机端页面:m.baidu.com 舒服！再看一下最近比较'火'的京东的案例:分别访问 jd.com m.jd.com 可以发现: PC端限制了最小的宽度, 低于了则以最小宽度出现滚动条

【原创】display:flex布局大全

阅读更多关于【原创】display:flex布局大全

全都是自己写的希望大家可以点个赞谢谢！ Html代码（没时间精简请多包涵） 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Flex布局大全</title> 8 <style> 9 body,html{ 10 width: 100%; 11 height: 100%; 12 display: flex; 13 justify-content: space-between; 14 } 15 .fore{ 16 width: 700px; 17 height: 277px; 18 margin: auto; 19 display: flex; 20 justify-content:space-around; 21 flex-wrap: wrap; 22 } 23 .row1,.row2,.row3{ 24 width: 700px; 25 height: 95px; 26 display: flex; 27

div+css实现水平/垂直/水平垂直居中超详解

阅读更多关于 div+css实现水平/垂直/水平垂直居中超详解

目录一、水平居中 1.块级元素水平居中方法一:设置margin:0 auto 方法二:设置flex布局方法三:设置css3的transform 2.行内元素水平居中行内元素在块级元素中水平居中方法一：将外层块级元素设置为text-align：center 方法二：将行内元素设置为块级元素 3.元素内部文字水平居中 1）块内文字水平居中方法：text-align：center 2）行内文字水平居中二、垂直居中 1）块级元素的内部元素垂直居中方法一：flex布局（块级元素、行内元素都可）方法二：css3 transform属性（对行内元素无效） 2）元素内文字垂直居中 1.设置line-height和height相同（仅在容器宽高固定时有效，那么当宽高为百分比时无效） 2.flex布局附：css2的vertical-align属性（对块级元素无效）三、水平垂直居中 1.块级元素水平垂直居中 1）使用flex布局 2）使用css3 transform属性 2.元素内文字水平垂直居中方法一：设置text-align和line-height 方法二：flex布局(都可) 综上所述，flex布局近乎全能，要好好掌握！！在此之前，清除一下浏览器的默认样式 html,body { margin : 0 ; padding : 0 ; } ok，开始正文~ 一、水平居中 1

弹性盒子（ Flex Box）语法

阅读更多关于弹性盒子（ Flex Box）语法

㈠什么是弹性盒子？弹性盒子是 CSS3 的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 ● 伸缩容器：设置为display:flex或display:inline-flex的元素称为伸缩容器。 ● 伸缩项目：伸缩容器的子元素称为伸缩项目注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效；弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行默认情况下伸缩容器存在两根轴，水平的主轴和垂直的侧轴。㈡浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。㈢基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start

阅读更多关于 Flex布局

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。布局的传统解决方案，基于盒状模型，依赖display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。简单的分为容器属性和元素属性容器的属性： flex-direction：决定主轴的方向（即子item的排列方法） .box { flex-direction: row | row-reverse | column | column-reverse; } flex-wrap：决定换行规则 .box{ flex-wrap: nowrap | wrap | wrap-reverse; } flex-flow： .box { flex-flow: <flex-direction> || <flex-wrap>; } justify-content：对其方式，水平主轴对齐方式 align-items：对齐方式，竖直轴线方向项目的属性（元素的属性）： order属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为0 flex-grow属性：定义项目的放大比例，即使存在空间，也不会放大 flex-shrink属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个item的flow-shrink为0，则为不缩小 flex

web前端入门到实战：CSS奇淫技巧 :视差图像，sticky footer 混合模式等等

阅读更多关于 web前端入门到实战：CSS奇淫技巧 :视差图像，sticky footer 混合模式等等

CSS是一种独特的语言。乍一看，这似乎很简单,但是，某些在理论上看起来很简单的效果在实践中往往不那么明显。在本文中，我将分享一些在大多数CSS教程中不太可能找到的有用技巧。 1. Sticky Footer 这个非常常见的需求,但对于初学者来说可能是个难题。对于大多数项目，不管内容的大小，都希望页脚停留在屏幕的底部—如果页面的内容经过了视图端口，页脚应该进行调整。在CSS3之前，如果不知道脚的确切高度，就很难达到这种效果。虽然我们称它为粘性页脚，但你不能简单地用 position: sticky 来解决这个问题，因为它会阻塞内容。今天，最兼容的解决方案是使用 Flexbox 。主要的做法是在包含页面主要内容的 div 上使用不太知名的 flex-grow 属性，在下面的示例中，我使用的是 main 标签。 flex-grow 控制 flex 项相对于其他 flex 元素填充其容器的数量。当值为 0 时，它不会增长，所以我们需要将它设置为 1 或更多。在下面的示例中，我使用了简写属性 flex: auto ，它将 flex-grow 默认设置为 1 。为了防止任何不必要的行为，我们还可以在 footer 标签中添加 flex-shrink: 0 。 flex-shrink 实际上与 flex-growth 属性相反，控制 flex 元素收缩到适合其容器的大小，将它设置为

移动端页面开发流程

阅读更多关于移动端页面开发流程

移动端页面布局一、移动端app分类 1、Native App原生app手机应用程序　　使用原生的语言开发的手机应用，Android系统用的是java，ios系统用的是object-C 2、Hybrid App 混合型app手机应用程序　　混合使用原生的程序和html5页面开发的手机应用 3、Web App 基于Web的app手机应用程序　　完全使用html5页面加前端js框架开发的手机应用二、Viewport视口　　视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用meta标签，name="viewport"来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。　　在移动端用来承载网页的这个区域，就是我们的视觉窗口，viewport（视口），这个区域可以设置高度宽度，可以按比例放大缩小，而且能设置是否允许用户自行缩放。参数说明： width：宽度设置的是viewport宽度，可以设置device-width特殊值initial-scale：初始缩放比，大于0的数字maximum-scale：最大缩放比minimum-scale

flex弹性盒子布局

阅读更多关于 flex弹性盒子布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex</title> <style> *{ padding: 0; margin: 0; } body{ background-color: red; } .container{ width: 100%; min-height: 500px; background-color: yellowgreen; display: flex; } .container .left{ width: 200px; height: 500px; background-color: purple; } .container .right{ width: 150px; height: 500px; background-color: blue; } .container .center{ flex-grow: 1; height: 500px; background-color: orange; } </style></head><body><div class="container"><div class="left"></div> <div class="center"> </div> <div class="right"></div></div></body

订阅 flex布局