HTML初学笔记2

来源：互联网发布：mysql持久化编辑：程序博客网时间：2024/05/23 19:42

使用html写一首诗，因为今天学习了布局，故采用flex布局方法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <style>        * {            padding: 0;            margin: 0;        }                html,        body {            height: 100%;        }                body {            display: flex;            align-items: center;            justify-content: center;        }                section {            display: flex;            flex: 0 0 auto;            flex-direction: column;            align-items: center;            padding: 10px;        }                section p {            margin-top: 5px;        }                li {            list-style: none;            font-size: 18px;            margin-top: 5px;        }                h2 {            font-size: 22px;        }    </style></head><body>    <section>        <h2>静夜思</h2>        <p>—李 白</p>        <ul>            <li>床前明月光，</li>            <li>疑是地上霜。</li>            <li>举头望明月，</li>            <li>低头思故乡。</li>        </ul>        <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=1487df1dfe039245a1b5e107b795a4a8/a40f4bfbfbedab64d4066410f536afc378311eed.jpg" alt="">    </section></body></html>

flex容器属性

flex-direction
这个属性主要设置flex容器的主轴方向，指定flex项目在flex容器中的排列方式。flex容器的主轴方向主要有水平和纵向两种。
flex-direction:row;
从左向右排在一行
flex-direction ：column ;
按列排列
flex-direction ：row-reverse ;
反向排列

flex-wrap
flex项目在flex容器中默认是只显示一行。如果希望控制flex项目在flex容器中按一行或多行排列，可以使用flex-wrap
属性。
flex-wrap : nowrap ;
根据屏幕自动缩放大小
flex-wrap : wrap ;
根据每个子item动态布局

flex-flow
这个属性是flex-direction和flex-wrap属性的简写。
默认值：row nowrap
justify-content
属性用来指定flex项目在flex容器沿着主轴在当前行的对齐方式。
justify-content: flex-start;
flex项目向flex容器的左边靠齐。
justify-content: flex-end;
flex项目向flex容器的右边靠齐。
justify-content: center;
Flex项目在flex容器中居中对齐。
justify-content:space-between
Flex项目之间间距相对，第一个和最后一个flex项目向flex容器的边缘对齐.
justify-content:space-around
Flex项目前后相等的空间显示在flex容器中。第一个Flex项目左边的间距和最后一个Flex项目右边的间距是其他相相邻flex项目之间间的一半。

align-items
Flex项目在容器侧轴对齐方式，类似于justify-content
，只不过不是水平方向，而是纵向。这个属性可以设置所有flex项目对齐方式，并且包括匿名元素。
align-items:stretch;
Flex项目沿着flex容器侧轴方向填满整个flex容器高度（或宽度）
align-items:flex-start;
Flex项目排列在flex容器侧轴开始处。
align-items:flex-end;
Flex项目排列在flex容器侧轴结束处
align-items:center;
Flex项目排列在flex容器侧轴中间处
align-items:baseline;
Flex项目按文本基线在flex容器侧轴中排列。
align-content
align-content
属性将flex容器内的行在flex容器中侧轴排列方式，类似于justify-content,在主轴方向的单个Flex项目对齐方式,Flex项目在flex容器中多行显示行，其多行在flex容器的侧轴方向对齐方式。
align-content:stretch;
Flex项目行在flex容器侧轴按分布式空间排列，
align-content:flex-start;
Flex项目在flex容器侧轴开始处排列。
align-content:flex-end;
Flex项目在flex容器侧轴末尾处排列。
align-content:center;
Flex项目行沿flex容器侧轴中间排列。
align-content:space-between;
Flex项目行与行之间间距相等，并且flex项目行第一行排在flex容器侧轴开始之处，flex项目行最后一行排在flex容器侧轴末尾之处。
align-content:space-around;
Flex项目行的上下间距相等，并且沿flex容器侧轴排列。
Flex项目行上下间距相等，并且flex容器第一行距flex容器侧轴开始处间距是flex项目行与行之间间距一半。同时项目行最后一行距flex容器侧轴末尾处间距是flex项目行与行之间间距一半

Flex项目属性

order
属性是用来控制flex容器中flex项目的排列顺序。默认情况flex项目在flex容器的顺序是flex项目出现的顺序。
flex-grow
这个属性用来指定 flex项目的放大比例，其决定了flex项目相对flex容器自由空间进行放大。
flex-shrink
flex-shrink属性用来指定flex项目缩小比例。决定了flex项目将相对于其他flex项目在flex容器空间不足之下自动收缩。
flex-basis
这个属性和width和height属性相同，用来指定flex项目的大小。
flex
这个属性是flex-grow、flex-shrink和flex-basis属性的简写
align-self
使用align-self属性可以指定flex项目自身的对齐方式或者使用align-items来指定单个flex项目

0 0

HTML初学笔记2

使用html写一首诗，因为今天学习了布局，故采用flex布局方法

flex容器属性

flex-direction

flex-direction:row;

flex-direction ：column ;

flex-direction ：row-reverse ;

flex-wrap

flex-wrap : nowrap ;

flex-wrap : wrap ;

flex-flow

justify-content

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content:space-between

justify-content:space-around

align-items

align-items:stretch;

align-items:flex-start;

align-items:flex-end;

align-items:center;

align-items:baseline;

align-content

align-content:stretch;

align-content:flex-start;

align-content:flex-end;

align-content:center;

align-content:space-between;

align-content:space-around;

Flex项目属性

order

flex-grow

flex-shrink

flex-basis

flex

align-self