1Display: flex
2Flex-direction: row | row-reverse | column | column-reverse
3align-self: flex-start | flex-end | center | baseline | stretch
4justify-content: start | center | space-between | space-around | space-evenly
1/* Flex */
2.anyclass {
3 display:flex;
4}
5/* row is the Default, if you want to change choose */
6.anyclass {
7 display:flex;
8 flex-direction: row | row-reverse | column | column-reverse;
9}
10
11.anyclass {
12 /* Alignment along the main axis */
13 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
14}
1<!--basic--flex--layout-->
2<html>
3 <head>
4 <style>
5 .parent{
6 display: flex or inline-flex;
7 flex-direction: row or column;
8 flex-wrap: wrap or wrap-reverse;
9 }
10 </style>
11 </head>
12 <body>
13 <div class="parent">
14 <div class="child-1"></div>
15 .
16 .
17 .
18 </div>
19 </body>
20</html>
1.class {
2 display: flex;
3}
4
5/* use display: flex to turn CSS element into a flexbox */
1The flex property is a shorthand property for:
2
3flex-grow
4flex-shrink
5flex-basis