day7-flex布局

1.阿里图标

免费将图标以字体的形式加载页面
​
    使用步骤：
    1.  打开阿里图标官网：https://www.iconfont.cn/
    2.  注册/登录
    3.  选择需要的图标加入购物车
    4.  下载代码

2.flex布局(弹性盒模型)

flex是当前较为主流的布局方式 --> 它布局起来更方便,可以取代float --> float一开始不是用来布局用的,有一些小缺陷

用布局的元素称为flex容器. 它里的内容称为容器项目/flex项目      父级:容器   子级:项目
​
flex布局原理: 就是通过两条轴.把网页分割成一行行/一列列
    flex主轴是从左往右. 副轴是从上往下. 默认情况下是左右水平布局
​
flex的使用三要素:
    1.主轴的方向 (你是要左右水平布局 / 上下垂直布局)
    2.主轴的对齐方式
    3.副轴的对齐方式
​
flex的使用:
    display:flex;
​
flex样式说明:
    设置主轴方向(决定左右/上下布局): flex-direction
        row;    # 行,默认属性.从左往右
        column;   # 列,从上往下
        row-reverse;    # 行反转.从右往左
        column-reverse;   # 列反转,从下往上
​
    设置主轴对齐方式: justify-content
        flex-srart;   #  默认,按照起点对齐. 左/上
        flex-end;   #  按照终点对齐. 右/下
        space-around;  #  均分布局
        space-between;   #  两端布局
        
    设置副轴对齐方式: align-items
        center;  # 居中
        flex-start;   # 靠起点
        flex-end;   # 靠终点
​
    设置换行(如果主轴装不下内容)  flex-wrap
        no-wrap;   #  缩放不换行
        wrap;   #  换行
​
    flex项目属性:
        order:  项目的顺序,数值越小,排序越靠前.默认为0