ip2region -- 查询IP地址

flex布局相关的代码

介绍

弹性盒子是CSS3的一种新的布局模式。 
CSS3弹性盒（ Flexible Box 或 flexbox）， 是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

FlexBox可以控制弹性项（flex item）的以下方面：
    1.大小，基于内容和可用空间
    2.流动方向，水平还是垂直，正向还是反向
    3.两个轴向的对齐和分布
    4.顺序，可覆盖源代码中的顺序

flex容器

实现 flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。
对于任意类型的元素定义display:flex后，该元素就会变成容器flex container。
此时，它的所有的直接子元素（无论什么元素类型）都会变成弹性项flex item


#### 简单的demo
<div class="flex-container">
    <span>flex item</span>
    <div>flex item</div>
    <p>flex item</p>
</div>

.flex-container{
        display: flex;
    }
####

flex容器的属性

1.flex-direction  决定主轴的方向(即项目的排列方向) 默认值：row，
2.flex-wrap  决定容器内项目是否可换行 默认值：nowrap 不换行
3.flex-flow 是flex-direction属性和flex-wrap属性的简写形式
4.justify-content  定义了项目在主轴的对齐方式。
5.align-items   定义了flex item在交叉轴（纵轴）上的对齐方式
6.align-content  

flex-direction值

flex-direction 决定主轴的方向（即flex item的排列方向）
    row：主轴为水平方向，起点在容器的左端（默认）
    row-reverse：主轴为水平方向，起点在容器的右端
    column：主轴为垂直方向，起点在容器的上沿
    column-reverse：主轴为垂直方向，起点在容器的下沿


# demo
<template>
    <div class="flex-container">
        <span>flex item1</span>
        <div>flex item2</div>
        <span>flex item3</span>
    </div>
</template>

<script>
</script>

<style scoped>
    .flex-container {
        display: flex;
        
        /* flex-direction: row; */
        /* flex-direction:column; */
        /* flex-direction:row-reverse;  */
        flex-direction:  column-reverse;
    }
    
    .flex-container span{
        background-color: antiquewhite;
        width: 100px;
        height: 100px;
        margin-left: 2%;
    }
    
    .flex-container div{
        background-color: aqua;
        width: 100px;
        height: 100px;
        margin-left: 2%;
    }
</style>

示例代码

flex-wrap值

默认情况下容器里的所有flex item都排在一条线，flex-wrap定义如果一行排不下如何换行
    nowra：不换行，此时超出一行，则每个flex item按照一定规则进行比例收缩（默认）
    wrap：换行，第一行在上方（即从左往右，从上往下的顺序）
    wrap-reverse：换行，第一行在下方（即从左往右，从下往上的顺序）。


# demo
<template>
    <div class="flex-container">
        <span>flex item1</span>
        <div>flex item2</div>
        <span>flex item3</span>
        <div>flex item4</div>
    </div>
</template>
  
<script>
</script>
  
<style scoped>
    .flex-container {
        display: flex;
        width: 400px;
        /* flex-wrap: nowra; */
        /* 超出范围会进行换行 */
        flex-wrap: wrap; 
        /* flex-wrap: wrap-reverse; */
    }
    
    .flex-container span {
        background-color: antiquewhite;
        width: 100px;
        height: 100px;
        margin-left: 2%;
    }
    
    .flex-container div {
        background-color: aqua;
        width: 100px;
        height: 100px;
        margin-left: 2%;
    }
</style>

示例代码

justify-content

justify-content 定义了flex item在主轴（横轴）上的对齐方式
    flex-start（默认值）：左对齐
    flex-end：右对齐
    center： 居中
    space-between：两端对齐，flex item之间的间隔都相等（如果只有两个flex item则主轴两边各一个。如果只有一个flex item则只在容器主轴的开始位置排列 ）。
    space-around：每个flex item两侧的间隔相等。所以，flex item之间的间隔比主轴两边的flex item到左，右边界的间隔大一倍（如果只有一个flex item则排列在中间）。

align-items

align-items 定义了flex item在交叉轴（纵轴）上的对齐方式
    stretch：如果项目未设置高度或设为auto，将占满整个容器的高度（默认值）
    flex-start：交叉轴的起点对齐
    flex-end：交叉轴的终点对齐
    center：交叉轴的中点对齐
    baseline: 项目的第一行文字的基线对齐

垂直居中技巧:
    给flex contanier设置justify-content:center和align-items:center可实现所有flex item的相对于flex contanier的垂直水平居中

align-content

align-content属性定义了多根轴线（即多行）的对齐方式。如果项目只有一根轴线（一行），该属性不起作用。
    stretch：轴线占满整个交叉轴（默认值）
    flex-start：与交叉轴的起点对齐
    flex-end：与交叉轴的终点对齐
    center：与交叉轴的中点对齐
    space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
    space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

弹性项

成为弹性项的元素可以设置以下CSS属性
    order：定义flex item的排列顺序。数值越小，排列越靠前。
           默认情况下每个flex item 为0，表示就按照HTML代码定义的弹性项元素顺序排列。
           该值可为正数和负数

    flex grow：定义flex item的放大比例，默认为0，即如果存在剩余空间，也不放大。不可为负值。

    flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。不可为负值

eg:
flex-basis: 50%;  也可以将内容对半平分
如果所有flex item的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

<template>
    <div class="flex-container">
        <span>flex item1</span>
        <div>flex item2</div>
        <span>flex item3</span>
        <div>flex item4</div>
    </div>
</template>
  
<script>
</script>
  
<style scoped>
    .flex-container {
        display: flex;
        /* width: 400px; */
    }

    .flex-container span {
        background-color: antiquewhite;
        width: 100px;
        height: 100px;
        margin-left: 2%;
        flex-grow: 2;
    }
    
    .flex-container div {
        background-color: aqua;
        width: 100px;
        height: 100px;
        margin-left: 2%;
        flex-grow: 1;
     }
</style>

示例代码

参考文档

应用

# 元素两端对齐 (可以实现 左边是筛选项，右边是查询或其它操作按钮)
# 父级设置成 flex属性并且设置元素在两端对齐即 (justify-content: space-between)

<template>
    <div class="level0">

        <div class="level1">
            <div>元素1</div>
            <div>元素2</div>
        </div>

        <div class="level2">
            <div>元素3</div>
        </div>
    </div>
</template>
  
<script>

</script>
  
<style lang="less">

.level0 {
    display: flex;

    justify-content: space-between;  // 让元素在两端对齐

    .level1 { 
        display: flex;
    }

    .level2 {
        display: flex;
    }
}
</style>

示例代码

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。