- 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>Documenttitle>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- div {
- width: 600px;
- height: 500px;
- background: yellow;
- display: flex;
- /*
- 弹性子元素主轴的对齐方式 justify-content
- 什么时候是主轴?取决于它的排列方式
- 如果弹性子元素自左向右在一排显示 那么x轴是主轴
- 如果弹性子元素自上而下在一竖排显示 那么y轴是主轴
- */
- justify-content: space-between;
- /* 6个值
- 1. flex-start
- 2. flex-end
- 3. center
- 4. space-between
- 5. space-evenly
- 6. space-around */
-
-
- /* 更改弹性子元素的排列方式flex-direction */
- /* flex-direction:column-reverse; */
- /*
- row 自左向右在一排显示
- row-reverse 自左向右翻转
- column 自上而下竖着显示
- column-reverse 自上而下翻转
- */
-
-
- /* 弹性子元素侧轴的对齐方式 align-items
- 如果弹性子元素自左向右在一排显示 那么y轴是侧轴
- 如果弹性子元素自上而下在一竖排显示 那么x轴是侧轴
- */
- /* flex-start flex-end center baseline*/基线对齐一般不用
-
- /* align-items: center; */
- align-items:baseline;
- }
-
- p {
- width: 100px;
- height: 100px;
- background: #f0f;
- }
- p:nth-child(2){
- padding-top: 50px;
- }
-
-
- 复合
-
- ul {
- background: pink;
- display: flex;
- width: 400px;
- height: 400px;
- /* flex-wrap: wrap;
- flex-direction: column; */
- /* flex-wrap 与 flex-direction 的复合写法 */
- flex-flow: column wrap;
- margin: 0 auto;
- }
- li {
- width: 150px;
- height: 120px;
- background: purple;
-
- }
- nav {
- width: 300px;
- height: 300px;
- background: orange;
- /* position: relative; */
- display: flex;
- justify-content: center;
- align-items: center;
- }
- span {
- background-color: orchid;
- /* position: absolute;
- left: 0; right: 0; bottom: 0; top: 0;
- margin: auto;
- width: 50px;
- height: 50px; */
- }
-
- /*用弹性盒去写水平垂直,只需要加上上边的这个粉色的,不需要定位,偏移,行内块找个空标签vertical-align:middle; height:100%什么之类的 */
-
-
- style>
- head>
- <body>
- <div>
- <p>1p>
- <p>2p>
- <p>3p>
- <p>4p>
- <p>5p>
- div>
- <ul>
- <li>li>
- <li>li>
- <li>li>
- <li>li>
- ul>
- <nav>
- <span>111span>
- nav>
- body>
- html>
什么时候是主轴取决于它的排列方式
justify-content:flex-start;默认值
justify-content:flex-end;
justify-content:center;
中间是两端的倍数justify-content:space-around;
平均分配justify-content:space-evenly;
两端对齐 justify-content:space-between ;
自上而下的排用column
还可以竖着方向用横着的那些元素,如space-between、space-evenly、space-around flex-end
justify-content:space-evenly
flex-direction: column-reverse
竖着翻转在竖着的下面 justify-content:flex- end
侧轴
自左向右排 x是主轴,自然y是侧轴
加个flex-dierection: column;
这时控制的是水平方向