2021-10-29

使用display:flex能更方便的调整布局

案例：

    display: flex;
    justify-content: space-between;
    align-items: center;

部分列举：

1）flex-direction：row | row-reverse | column | column-reverse 项目的排列方向

2）flex-wrap：nowrap | wrap | wrap-reverse 是否换行

3） flex-flow： || flex-direction 和 flex-wrap 的简写

4） justify-content：flex-start | flex-end | center | space-between | space-around 在水平 方向上的对齐方式

5） align-items: flex-start | flex-end | center | baseline | stretch 定义在垂直方向上的对齐 方式

6）align-content: flex-start | flex-end | center | space-between | space-around | stretch 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用(item 有多行 时)

更详细的使用方法

Flex 布局语法教程 | 菜鸟教程

修改选中目标样式   :focus

 去除文本框选中后的边框：outline: none;