flex布局
flex布局极大的提高了我们布局的效率,更简单、灵活。
使用flex布局
使用的步骤比较简单:
1、给需要使用弹性盒子布局的亲父元素设置:display: flex; 弹性布局我们一般称呼父元素为:弹性容器,子元素为弹性盒子。
2、布局所设置的元素也基本都写在父级。
使用弹性布局时一定要注意:display: flex; 一定要给亲父级添加并且它只影响它的亲儿子元素,孙子级完全无影响!
flex属性值
代码有:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 800px;
height: 300px;
margin: 100px auto;
/* 弹性容器 */
display: flex;
/* 主轴对齐方式