• flex布局学习


    教程来自阮一峰的flex布局教程实例篇

    容器五大属性:

    flex-direction:容器内项目的排列方向

    (1)row:横向从左往右排列(默认)

    (2)row-reverse:横向从右往左排列,是将元素一个一个的靠右放置,要跟justify-content中的flex-end区分清楚

    (3)column:纵向从上往下排列

    (4)column-reverse:纵向从下往上排列

    flex-wrap:项目排列换行

    (1)nowrap:不换行,项目超出容器范围自动缩小项目(默认)

    (2)wrap:顺序换行

    (3)wrap-reverse:排完序后整行交换

    justify-content:项目在主轴上的对齐方式(一定要跟flex-direction区分清楚)

    (1)flex-start:左对齐(默认),或向上对齐

    (2)center:居中

    (3)flex-end:右对齐,或向下对齐,是将元素从左往右排列完后整体右对齐,要跟flex-direction中的row-reverse区分清楚

    (4)spaec-around:元素两边平均等分剩余空白间隙部分,最左(上)或最右(下)和元素之间的距离是1:2

    (5)space-between:两端对齐,元素之间平均等分生于空白间隙部分

    align-items:交叉轴上元素的对齐方式

    (1)flex-start:交叉轴起点对齐(向上或向左)

    (2)center:交叉轴居中对齐

    (3)flex-end:交叉轴结束位置对齐(向下或向右)

    (4)stretch:对未设置高度或高度设置为auto的项目进行拉伸填满容器(默认)

    (5)baseline:保证元素中的文字在同一条基准线上

    align-content:定义轴线的对齐方式

    (1)flex-start:交叉轴起点对齐

    (2)center:交叉轴中点对齐

    (3)flex-end:交叉轴终点对齐

    (4)space-between:与交叉轴两段对齐,轴线之间等距

    (5)space-aroud:每根轴线等距

    (6)strtch:轴线占满整个交叉轴(默认)

    项目属性:

    order:定义项目排序顺序,数值越小排列越靠前.默认为0

    flex-grow:项目放大比例,默认为0不放大,将剩余空间按比例分配给要放大的元素

    flex-shrink:项目缩小比例,设置为0不缩小

    flex-basis:为项目设置主轴上的固定空间

    align-self:允许单个项目与其他项目不同的对齐方式,可以覆盖align-items属性

    (一)骰子的布局

    1.1单项目一个点

    默认为首行左对齐:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         
     7         <style type="text/css">
     8             body{
     9                 background-color: black;
    10             }
    11             .box{
    12                 /*
    13                 *默认为首行左对齐
    14                 */
    15                 width: 400px;
    16                 height: 400px;
    17                 background-color: ghostwhite;
    18                 display: flex;
    19             }
    20             .item{
    21                 width: 100px;
    22                 height: 100px;
    23                 margin: 30px;
    24                 background-color: #000000;
    25                 
    26             }
    27             .thick-white-border{
    28                 /*
    29                 *为容器box设置样式
    30                 */
    31                 border-color: #ffffff;
    32                 border-width: 50px;
    33                 border-radius: 20px;/*圆角边框*/
    34             }
    35             .thick-black-border{
    36                 /*为元素span设置样式*/
    37                 border-color: #000000;
    38                 border-radius: 50%;/*把span元素变成圆形*/
    39             }
    40         </style>
    41     </head>
    42     <body>
    43         <div class="box  thick-white-border">
    44             <!--
    45             --box为外层容器,是骰子的面
    46             -->
    47             <span class="item  thick-black-border"></span>
    48         </div>
    49     </body>
    50 </html>
    defalut

    设置居中对齐:

    /*
    *把以下代码加入box样式设置中
    */
    justify-content: center;

    设置右对齐:

    justify-content: flex-end;

    设置交叉轴对齐方式,将横向轴下移,显示为中间行左对齐:

    1 .box{
    2  400px;
    3 height: 400px;
    4 background-color: ghostwhite;
    5 display: flex;
    6 align-items: center;
    7 }

    中间行,中间对齐:

    1 .box{
    2  400px;
    3 height: 400px;
    4 background-color: ghostwhite;
    5 display: flex;
    6 align-items: center;
    7 justify-content: center;
    8 }

    中间行右对齐:

    justify-content: flex-end;

    靠低行中间对齐:

    align-items: flex-end;
    justify-content: center;

    靠低行右对齐:

    align-items: flex-end;
    justify-content: flex-end;

    1.2双项目2个点

    首行两边对齐:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         
     7         <style type="text/css">
     8             body{
     9                 background-color: black;
    10             }
    11             .box{
    12                 /*
    13                 *默认为首行左对齐
    14                 */
    15                 width: 400px;
    16                 height: 400px;
    17                 background-color: ghostwhite;
    18                 display: flex;
    19                 justify-content: space-between;/*首行两边对齐*/
    20             }
    21             .item{
    22                 width: 100px;
    23                 height: 100px;
    24                 margin: 30px;
    25                 background-color: #000000;
    26                 
    27             }
    28             .thick-white-border{
    29                 /*
    30                 *为容器box设置样式
    31                 */
    32                 border-color: #ffffff;
    33                 border-width: 50px;
    34                 border-radius: 20px;/*圆角边框*/
    35             }
    36             .thick-black-border{
    37                 /*为元素span设置样式*/
    38                 border-color: #000000;
    39                 border-radius: 50%;/*把span元素变成圆形*/
    40             }
    41         </style>
    42     </head>
    43     <body>
    44         <div class="box  thick-white-border">
    45             <!--
    46             --box为外层容器,是骰子的面
    47             -->
    48             <span class="item  thick-black-border"></span>
    49             <span class="item  thick-black-border"></span>
    50             <!--CSS文件中的样式设置类可以复用,无需为新span元素单独设置样式-->
    51         </div>
    52     </body>
    53 </html>
    双项目2个点

    等距对齐:

    justify-content: space-around;

    双项目纵向排列,默认首列:

    1 .box{
    2  400px;
    3 height: 400px;
    4 background-color: ghostwhite;
    5 display: flex;
    6 flex-direction: column;
    7 justify-content: space-around;
    8 }

    双项目,骰子2点布局:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         
     7         <style type="text/css">
     8             body{
     9                 background-color: black;
    10             }
    11             .box{
    12                 width: 400px;
    13                 height: 400px;
    14                 background-color: ghostwhite;
    15                 display: flex;
    16                 justify-content: space-around;
    17             }
    18             .item{
    19                 width: 80px;
    20                 height: 80px;
    21                 margin: 30px;
    22                 background-color: #000000;
    23                 display: flex;
    24             }
    25             .item:nth-child(2){
    26                 align-self: center;
    27             }
    28 
    29             
    30             .thick-white-border{
    31                 /*
    32                 *为容器box设置样式
    33                 */
    34                 border-color: #ffffff;
    35                 border-width: 50px;
    36                 border-radius: 20px;/*圆角边框*/
    37             }
    38             .thick-black-border{
    39                 /*为元素span设置样式*/
    40                 border-color: #000000;
    41                 border-radius: 50%;/*把span元素变成圆形*/
    42             }
    43         </style>
    44     </head>
    45     <body>
    46         <div class="box  thick-white-border">
    47             <!--
    48             --box为外层容器,是骰子的面
    49             -->
    50             <span class="item  thick-black-border"></span>
    51             <span class="item  thick-black-border"></span>
    52 
    53         </div>
    54     </body>
    55 </html>
    骰子2点

    1.3三项目:

    骰子三点斜线布局;

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         
     7         <style type="text/css">
     8             body{
     9                 background-color: black;
    10             }
    11             .box{
    12                 width: 400px;
    13                 height: 400px;
    14                 background-color: ghostwhite;
    15                 display: flex;
    16             }
    17             .item{
    18                 width: 80px;
    19                 height: 80px;
    20                 margin: 30px;
    21                 background-color: #000000;
    22                 display: flex;
    23             }
    24             .item:nth-child(2){
    25                 align-self: center;
    26             }
    27             .item:nth-child(3){
    28                 align-self: flex-end;
    29             }
    30 
    31             
    32             .thick-white-border{
    33                 /*
    34                 *为容器box设置样式
    35                 */
    36                 border-color: #ffffff;
    37                 border-width: 50px;
    38                 border-radius: 20px;/*圆角边框*/
    39             }
    40             .thick-black-border{
    41                 /*为元素span设置样式*/
    42                 border-color: #000000;
    43                 border-radius: 50%;/*把span元素变成圆形*/
    44             }
    45         </style>
    46     </head>
    47     <body>
    48         <div class="box  thick-white-border">
    49             <span class="item  thick-black-border"></span>
    50             <span class="item  thick-black-border"></span>
    51             <span class="item  thick-black-border"></span>
    52         </div>
    53     </body>
    54 </html>
    骰子三点布局

     样式文件分离:

    便于样式的修改

    在页面page文件中的同目录下新建CSS文件,在pages文件中使用@import导入CSS样式文件

  • 相关阅读:
    [Aaronyang] 写给自己的WPF4.5 笔记23 [3d交互与动画 4/4]
    [Aaronyang] 写给自己的WPF4.5 笔记22 [3d交互与动画 3/4]
    [Aaronyang] 写给自己的WPF4.5 笔记21 [3d课 2/4]
    [Aaronyang] 写给自己的WPF4.5 笔记20 [3d课 1/4]
    [Aaronyang] 写给自己的WPF4.5 笔记19[Visual类图文并茂讲解]
    [Aaronyang] 写给自己的WPF4.5 笔记18[几何图形*Geometry图文并茂讲解]
    [Aaronyang紫色博客] 写给自己的WPF4.5-Blend5公开课系列 3
    [Aaronyang紫色博客] 写给自己的WPF4.5-Blend5公开课系列 2-更进一步
    [Aaronyang紫色博客] 写给自己的WPF4.5-Blend5公开课系列 1
    [Aaronyang] 写给自己的WPF4.5 笔记15[AyArc诞生-WPF版本绚丽的环状图,Ay制作,AyWindow强势预览]
  • 原文地址:https://www.cnblogs.com/edward-life/p/10735023.html
Copyright © 2020-2023  润新知