box

必须给父容器div定义css属性display:box，其子容器才可以进行划分(如果定了display:box则该容器定义为内联元素，使用margin让其居中是无效的，可以在其父元素设置text-align:center让其居中); 子元素属性： box-flex:比例值; 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。 注： 如果子元素设置了固定宽度和margin，则该子元素直接应用宽度值，其它没有设置的则在父容器的宽度基础上减去子容器设置的固定宽度和margin值，在剩下的宽度基础上按一定比例进行划分分配。 代码块： <div> <p id="p1">web</p> <p id="p2">css</p> </div> 对子元素进行设置 效果 获取更多的文章，欢迎关注微信公众号 来源： CSDN 作者： 海生_php和web前端 链接： https://blog.csdn.net/zhs45656/article/details/52101420

display:box ; box-flex 是 css3 新添加的盒子模型属性，它的出现可以解决 我 们通过N多结构、 css 实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前 box-flex 属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。 一、 box-flex 属性 box-flex主要让子容器针对父容器的宽度按一定规则进行划分 html 代码： <article> <section>01</section> <section>02</section> <section>03</section> </article> CSS代码： .wrap{ width:600px; height:200px; display:-moz-box; display:-webkit-box; display:box ; } .sectionOne{ background:orange; -moz-box-flex:3; -webkit-box-flex:3; box-flex:3; } .sectionTwo{ background:purple; -moz-box-flex:2; -webkit-box

一、作用 在元素上设置该属性，可使其子代排列在同一水平上，类似 display:inlineblock;。 目前 box-flex 属性还没有得到 firefox、 Opera、 chrome 浏览器的完全支 持 ， 但 可 以 使 用 它 们 的 私 有 属 性 定 义 firefox(-moz-) 、 opera(-o-) 、 chrome/safari（-webkit-)。 二、可在其子代设置如下属性 前提：使用如下属性，必须在父代设置 display:box; 0x1 box-flex 可能的值为 n（数字）。 - 占父级元素宽度的 n 份 - 若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的字元素将余下的父级宽度（父级-已设置固定宽度的子代元素的总宽度按 n 占份数 - 若子元素有 margin 值，则按余下（父级宽度-子代固定总宽度-总 margin 值）宽度占 n 份 0x2 box-orient 可能的值： horizontal | vertical | inline-axis | block-axis | inherit - horizontal 在水平行中从左向右排列子元素。 - vertical 从上向下垂直排列子元素。 - inline-axis 沿着行内轴来排列子元素（映射为 horizontal）。 - block-axis

2019独角兽企业重金招聘Python工程师标准>>> 1 、display:box; 是老语法，display:flex;是新语法 2 、与子元素 display 方式的相关性不同display:box; 作用下，如果子元素是 block 的，竖着排，如果子元素是 inline、inline-block 的，横着排。 display:flex; 作用下，是横着排还是竖着排，只取决于 flex-direction 的值是 row 还是 column。 3 、float 等属性是否受影响的情况不同display:box; 作用下，float、clear、text-align、vertical-align 仍起作用。 display:flex; 作用下，上述四属性失效。 4 、横向排列时，子元素之间空白字符（空格、换行等）处理不同display:box; 作用下，不会被忽略。 display:flex; 作用下，忽略。 具体情况见 转载于:https://my.oschina.net/u/3407699/blog/1801911 来源： CSDN 作者： weixin_34023863 链接： https://blog.csdn.net/weixin_34023863/article/details/92386765

五字真言 </pre><pre name="code" class="javascript">.box{ /* display */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box; /* box-orient */ /** * vertical column * horizontal row */ -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -o-box-orient: vertical; box-orient: vertical; /* box-flex */ -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; -o-box-flex: 1; box-flex: 1; /* box-pack */ -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; -o-box-pack: justify; box-pack: justify; /* box-align */

以第二行超出省略号为例： .blocksLabelEllipsis{ text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } 来源： https://blog.csdn.net/qq_27822743/article/details/102779636

grid布局即网格布局，每个网格都有起止线，每两条线之间都有设定好的距离 1. 网格列宽设置 首先设置网格的父级元素 display：table grid -template -colums : 100 px 10 px 100 px 10 px 100 px; 表示第1列 100px ，第2列 10px (此列可作为列与列之间的间隙) 2.网格高度设置 grid- template -rows: auto 10 px auto 10 px; 表示第1行高度自适应内容，第2行 10px (此列可作为列与列之间的间隙) 3. 具体代码 < div class = "wrapper" > < div class = "box a" >A</ div > < div class = "box b" ></ div > < div class = "box c" >C</ div > < div class = "box d" ></ div > < div class = "box e" >E</ div > < div class = "box f" ></ div > < div class = "box g" ></ div > < div class = "box h" ></ div > < div class = "box i" ></ div > < div class =

常用的display兼容性 display display : -webkit-box; display : -moz-box; display : -ms-flexbox; display : -webkit-flex; display : flex; justify-content -webkit -box -pack : center; -moz -justify -content : center; -webkit -justify -content : center; justify -content : center; align-items -webkit -box -align : center; -moz -align -items : center; -webkit -align -items : center; align -items : center; flex-direction -webkit -box -direction : normal; -webkit -box -orient : vertical; -moz -flex -direction : column; -webkit -flex -direction : column; flex -direction : column; flex:1 -webkit-box- flex : 1 ;

今天在写h5活动的时候，使用到了flex布局，在chrome浏览器手机模式下测试一切ok，然后使用真机(iphone 5c)时，就发现了各种问题? 在网上找了下flex布局的各种兼容写法，特此记录下 原文地址： 弹性布局各种坑爹兼容 display：flex的兼容写法 display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -weblit-flex; display: flex; 定义子元素换行flex-firection的兼容性写法 -webkit-box-orient: verical; -webkit-box-direction: normal; -moz-box-orient: verical; -moz-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; 用box-orient:horizontal+box-direction:normal/reverse可以达到flex-direction:row/row-reverse效果 用box-orient:vertical+box-direction:normal/reverse可以达到flex-direction:column

一、 flexbox布局（弹性布局） 1.指定flex布局 { display:flex; display: -webkit-flex; /* Safari */} 行内元素 { display:inline-flex} 注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 2.概念 水平主轴(main axis)，垂直主轴(cross axis)。 3.容器属性 。flex-direction： 项目的排列方向（橫or竖） 。flex-wrap： 换不换行，默认一条线上 。flex-flow： 方向，换行 。justify-content： 主轴上对齐方式 。align-items： 交叉轴如何对齐 。align-content： 很多根轴线的对齐方式 。box-orient：指定一个box子元素方向 3.1 flex-direction —》row 水平，左端 —》row-reverse 水平，右端 —》column 垂直，上沿 —》column-reverse 垂直，下沿 3.2 flex-wrap —》nowrap 不换行 —》wrap 换行 —》wrap-reverse 换行，第一行在下方 3.3 flex-flow 是flex-direction和 flex-wrap简写，默认row nowrap 3.4 justify