Flex Box 简单弹性布局

ixlei 发布于2019-04-23 13:33 / 894人阅读

摘要：弹性盒子模型有两种规范早起的和后期的。它可以轻易的实现均分浮动居中等灵活布局，在移动端只考虑内核时很实用。一固定宽度占满剩余宽度垂直方向对齐方式水平方向对齐方式二固定宽度剩余空间的剩余空间的水平方向对齐方式垂直方向对齐方式

　　弹性盒子模型有两种规范：早起的display:box 和后期的display:flex。它可以轻易的实现均分、浮动、居中等灵活布局，在移动端只考虑webkit内核时很实用。

一、display:box

 1     <div class="container">
 2         <div class="box1">box1<br/>固定宽度div>
 3         <div class="box2">box2<br>占满剩余宽度div>
 4     div>
 5 
 6     <style type="text/css">
 7         .container{
 8             width: 400px;
 9             height: 120px;
10             border: 1px solid #ccc;
11             display: -webkit-box;
12             display: box;
13             -webkit-box-align: center;
14             box-align: center;
15             /*垂直方向对齐方式 box-align: start|end|center|baseline|stretch;*/
16             /*水平方向对齐方式 box-pack: start|end|center|justify;*/
17         }
18         .box1,.box2{
19             height: 100px;
20             margin: 0;
21             padding: 0;
22         }
23         .box1{
24             background: #aaa;
25             width: 100px;
26         }
27         .box2{
28             background: #ccc;
29             -webkit-box-flex:1.0;
30             box-flex:1.0;
31         }
32     style>

二、display:flex

 1     <div class="container">
 2         <div class="box1">固定宽度div>
 3         <div class="box2">剩余空间的1/3div>
 4         <div class="box3">剩余空间的2/3div>
 5     div>
 6 
 7     <style type="text/css">
 8         .container{
 9             width: 400px;
10             height: 120px;
11             border: 1px solid #ccc;
12             display: -webkit-flex;
13             display: flex;
14             -webkit-align-items: center;
15             align-items: center ;
16             /*水平方向对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around;*/
17             /*垂直方向对齐方式 align-items: flex-start | flex-end | center | baseline | stretch;*/
18         }
19         .box1,.box2,.box3{
20             height: 100px;
21         }
22         .box1{
23             background: #bbb;
24             width: 100px;
25         }
26         .box2{
27             background: #ccc;
28             -webkit-flex:1;
29             flex:1;
30         }
31         .box3{
32             background: #ffffd;
33             -webkit-flex:2;
34             flex:2;
35         }
36     style>

GPU云服务器云服务器 flex布局 html简单布局网站 box html box-

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2032.html

我所知道的flex布局 —— 上篇

摘要：布局也经历了一段演变历史。不同于将要出现的网格布局针对目标为大比例布局，弹性盒布局更适用于应用组件和小比例布局。常规布局是基于块和内联流方向，而布局是基于流。前言你还在用display+position+float来进行css布局吗？有没有觉得用传统的这种布局方法来实现特殊布局特别麻烦困难，例如：垂直居中。今天来记录一下自己对flex布局的了解（虽然不算神马新东西了都可以说是旧东西...

andycall 2019-08-30 13:13 评论0 收藏0
css3 弹性布局和多列布局

摘要：弹性盒子基础弹性盒子是中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。定义一个弹性盒子在父盒子上定义属性内核浏览器的兼容设置，下同当然还有行内布局的弹性盒子注意，设为布局以后，子元素的和属性将失效。弹性盒子基础弹性盒子(Flexible Box)是css3中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。定义一个弹性盒子在父盒子上定义display属性： #b...

stormzhang 2019-08-29 16:38 评论0 收藏0
【基础知识】Flex-弹性布局原来如此简单！！

摘要：年，提出了一种新的方案，是的缩写，意为弹性布局。它的所有子元素自动成为容器成员，称为项目，简称项目。属性分为两部分，一部分作用于容器称容器属性，另一部分作用于项目称为项目属性。表示不缩小，负值无效。后两个是可选属性。相关资源布局语法教程简言布局的传统解决方案是基于盒状模型，依赖 display + position + float 方式来实现，灵活性较差。2009年，W3C提出了一...

xbynet 2019-08-30 14:21 评论0 收藏0
弹性盒布局

一、弹性布局弹性布局，又称Flex布局 1、弹性布局的使用给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流； display:flex; 容器添加弹性布局后，显示为块级元素； display:inline-fle...

whatsns 2019-08-29 16:13 评论0 收藏0
弹性盒布局

一、弹性布局弹性布局，又称Flex布局 1、弹性布局的使用给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流； display:flex; 容器添加弹性布局后，显示为块级元素； display:inline-fle...

leanxi 2019-08-02 11:05 评论0 收藏0