阮一峰flex 布局

loading..

基本布局

display: flex        设置弹性布局，在九宫格中默认在靠左对其（第一行第一个）

justify-content：center；  设置水平线上的元素居中

 justify-content: flex-end;        设置水平线上的元素靠右

 align-items: center;                元素垂直移动，垂直居中，靠左对其

 justify-content：center；

align-items：center；                 元素水平垂直居中

justify-content: center;                设置元素水平居中

align-items:flex-end;                 设置元素垂直向下对齐

注意： 这里是  先水平居中，再垂直向下对齐 

justify-content: flex-end；

align-items:      flex-end;   设置元素在最右下角位置上

双元素

display：flex；

justify-content: space-between;               设置元素靠两边居中对齐

 flex-direction: column;                            设置元素垂直显示

justify-content: space-between;               设置元素 靠两边居中对齐

由于只是把布局设置为垂直显示，所以flex 默认还是在第一 行第一个，元素 从横线变成竖线（往下挤）

flex-direction ：column;                同理，先设置为垂直显示

justify-content: space-between                 设置水平元素居中对齐

align-items: center;                       设置垂直元素居中对齐 

flex-direction : column;                                同理，向设为列向

justify-content: space-betwenn;                 水平元素靠两边居中对齐

align-items: flex-end;                                  元素垂直靠右下角对齐 

display: flex                                设布局为弹性布局，元素默认在第一行

.item:nth-child(2){                       设 第二个 item  元素位于容器的中心

        align-self: center;

}

justify-content : space-between;                先设元素靠两边居中对齐

item:nth-chlid(2){                                        设第二个 item 靠右下角对齐，九宫格最后一个

        align-self: flex-end;

}

三个元素

.box{

        display: flex;

}                                                //第一个黑点排序

.item:nth-child(2){

        align-self:center;

}                                                //第二个 item 追加属性，让他居中

.item:nth-child(3){

        align-self:flex-end;           // 追加第三的 itme 属性，让他定位在最后

}

注意：align-self  属性定义了flex 子项单独在侧轴（纵轴）方向上的对齐属性

四个元素

.box{

        display: flex;                                                设置弹性布局

        flex-wrap： wrap；                                        溢出的元素自动换行

        justify-content: flex-end;                                元素考右对齐

        align-item : space-between;                        元素垂直上下对齐

}

.box{

        display: flex;

        flex-wrap: wrap;          溢出自动换行

        align-content： space-between;                对齐

}

.column{

        flex-basis: 100%l

        display; flex;

        justify-content: space-between;

}

注意： flex-basis 定义了在分配多余的空间以前，项目占据主轴的空间。

        100%  就是全部空间

六个元素

.box{

        display: flex;                                        

        flex-wrap: wrap;                                        超出换行

        align-content:  space-between;               元素对齐

}

.box{

        display: flex;

        flex-direction : column;                                横向变成纵向（竖）

        flex-wrap： wrap;                                        溢出换行

        align-content: space-between;                    对齐

}        

.box{

        display: flex;

        flex-wrap: wrap;

}

 .row{

        flex-basis: 100%;

        display: flex;

}

.row:nth-child(2){

        justify-content: conter;

}

.row: nth-child(3){

        justify-content: space-between;

}

 注意： 属性相同的class命，避免搞混，用child 追加属性增加代码的可读性

.box{

        display: flex;

        flex-wrap: wrap;

}

注意： 设置items 的宽高，溢出的items 直接换行就行了

圣杯布局主要分头header（头部）、body（身体）和 footer（脚）三部分，而body 又分left 、center 和 right

原理：首先写一个大容器box，里面装三个div，box 设置display：flex 弹性布局再给flex-direction：column 排序变成列。然后给flex：1； 按比列分三块。

        body同理，设置弹性布局，给center 分flex：1；其他两块自动填充，模型就基本好。

输入框布局

思维要打开，首先要把每个模块分开，每个搜索框分为三部分

第一个是图片（一般是矢量图），第二个是搜索框，第三个按钮

做完基本布局之后再优化，后面学

 
                             
                              
                               
                               
                              
 
                               图片 
                                搜索