Skip to content

flexbox应用 #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
some-code opened this issue May 30, 2018 · 0 comments
Open

flexbox应用 #2

some-code opened this issue May 30, 2018 · 0 comments

Comments

@some-code
Copy link
Owner

2009年，display: box 就已经出现，但是直到IE11的发布，全部的主流浏览器才统一支持新的用法display: flex。
这里只说应用，浏览器的兼容处理会附在文章的末尾。

起步

在现代主流浏览器中，只需要给一个元素加上一行display: flex就可以让他拥有弹性布局的魔力。

.div1{display: flex}
.div2{margin: auto} // 垂直居中
————————
|  
|       口
|
————————
.div2{margin-left: auto} // 靠右
————————
|             口  
|
|
————————
.div2{margin-right: auto} // 靠左
————————
|口  
|
|
————————
.div2{margin-bottom: auto} // 靠上
————————
|口  
|
|
————————
.div2{margin-top: auto} // 靠下
————————
|  
|
|口
————————

轴的方向

flex-direction 定义了主轴的方向，在html中，默认值是 row,即子元素横向排列，但是在微信小程序中，默认值是 column（纵向排列）。

  • 主轴与侧轴 flex-direction: row时，
.div1{display: flex; flex-direction: row}
.div1 > div // 从左到右排列
————————
口  口  口  口

.div2{display: flex; flex-direction: column}
.div2 > div // 从上到下排列
————————
口  
口  
口  
口

flexbox默认是不会换行的，如果不想全部的子元素都挤在同一行，需要加上这样的属性

.div1{display: flex; flex-direction: row; flex-wrap: wrap}
.div1 > div // 从左到右排列,占满一行会换行
———————
口  口  口  口
口  口

.div2{display: flex; flex-direction: column; flex-wrap: wrap}
.div2 > div // 从上到下排列，占满一列会换行
——————————
| 口 口 
| 口 口 
| 口  
| 口

对齐

justify-content 属性定义如何分配容器 主轴 上多个子元素之间的空间。

  • 如果是 flex-direction: column , 旋转屏幕90°看效果。
.div2{display: flex; flex-direction: row;}
.div2{justify-content: start} // 左侧为起点
————————
口口口口        
.div2{justify-content: end} // 右侧为起点
————————
         口口口口
.div2{justify-content: center} // 中心为起点
————————
    口口口口
.div2{justify-content: space-between} // 左右对齐，剩余空间平均分配
————————
口   口   口   口
.div2{justify-content: space-around} // 平均分配剩余空间，起始分配为其他的一半
————————
 口  口  口  口

居中

居中使用align-items 属性,定义侧轴上的空间分配，大部分参数和 justify-content 相同（不能使用space-between和space-around）。把屏幕旋转90°就可以看到效果了。

使用剩余空间

flex 属性定义在子元素上，规定它如何使用剩余的空间。

.div1{width: 1000px}
.div1 > .div2{
    width: 300px;
}
.div1 > .div3{flex: 1} // div3宽度为700px

_______div1(1000px)_________
|__div3(700px)__|___div2___|
____________________________

flex布局的应用

上下定高，中间高度自适应

<!--css代码-->
html, body{height: 100%}
.page{display: flex; flex-direction: column}
.header{height: 44px}
.content{flex: 1}
.footer{height: 44px}
<!--结构-->
<html>
    <body>
        <main class='page'>  
            <header class='header'></header>
            <div class='content'></div>
            <footer class='footer'></footer>
        </main>
    </body>
</html>
<!--page示意图-->
————————————
    .header(44px)
————————————
-
-
-
-
-
.content(视口高度减去88px)
-
-
-
-
-
————————————
     .footer(44px)
————————————

图文混排，图片定宽，文字自适应

<!--css代码-->
.card{width: 300px; display: flex}
.img{width: 100px}
.content{
    flex: 1; 
    display: flex; 
    flex-direction: column;
    justify-content: space-around;
}
<!--结构-->
<div class='card'>  
    <div class='img'></div>
    <div class='content'>
        <div class='title'></div>
        <div class='tag'></div>
        <div class='footer'></div>
    </div>
</div>
<!--card示意图-->
——————————————————————————
|            | .title
|            |
|.img(100px) | .tag               (.content 200px)
|            | 
|            | .footer
——————————————————————————

子元素水平、垂直居中

<!--css代码-->
.div{width: 300px; height: 300px;display: flex}
.div1{margin: auto}
<!--结构-->
<div class='div'>  
    <div class='div1'></div>
</div>
<!--水平垂直居中示意图-->
————————


       口


————————

flex兼容性处理

以下设置可以兼容大部分主流浏览器，比如IE10，android4，ios5

部分css代码来自白色橡树博客，原地址找不到，在此表示感谢

  • 定义为flexbox
.flex{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
}
  • 定义为纵轴排列
.flex-v{
    -webkit-box-orient:vertical;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
}
  • 子元素垂直居中
.align-center{
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
}
  • 子元素两端对齐
.pack-justify{
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@some-code