markdown Flexbox的
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown Flexbox的相关的知识，希望对你有一定的参考价值。
**Create a Flex Container**
To define and access a container as a flex container you can use display: flex;.
If no additional rules are set, all direct children will be considered flex items
and will be laid horizontally, from left to right.
The width of flex items automatically adjusts to fit inside the container.
HTML
```html
<div class="flexcontainer">
<div class="flexitem1" style="background-color: lightblue;"> test1 </div>
<div class = flexitem2 style=background-color:lightgreen;> test2 </div>
<div class = flexitem3 style=background-color:lightslategray;"> test3 </div>
</div>
```
CSS
```css
.flexcontainer {
display: flex;
}
```
---
**Defining Flex Direction**
To put all flex items in one column, add flex-direction: column; to your CSS.
```css
.flexcontainer {
display: flex;
flex-direction: column;
}
```
To reverse the column order of flex items, add `flex-direction: column-reverse;` to your CSS.
```css
.flexcontainer {
display: flex;
flex-direction: column-reverse;
}
```
To reverse the row order of flex items, add `flex-direction: row-reverse;` to your CSS.
```css
.flexcontainer {
display: flex;
flex-direction: row-reverse;
}
```
---
**Align and Justify Flex Items**
If you want flex items aligned to the right:
```css
.flexcontainer {
display: flex;
justify-content: flex-end;
}
```
If you want flex items centered:
```css
.flexcontainer {
display: flex;
justify-content: center;
}
```
If you want flex items separated:
```css
.flexcontainer {
display: flex;
justify-content: space-between;
}
```
To center flex items both horizontally and vertically:
```css
.flexcontainer {
display: flex;
justify-content: center;
align-items: center;
}
```
---
**Wrapping**
Resized to fit into one column or one row when a flex container is not large enough, flex items are not able to wrap by default. By using flex-wrap: wrap;, any flex items causing overflow will be wrapped to the next line.
To allow wrapping:
```css
.flexcontainer {
display: flex;
flex-wrap: wrap;
}
```
To allow reverse wrapping (overflow item(s) are sent to the line above):
```css
.flexcontainer {
display: flex;
flex-wrap: wrap-reverse;
}
```
To control the positioning of flex items when there is wrapping (replace * with stretch, space-around, space-between, center, flex-end, or flex-start):
```css
.flexcontainer {
display: flex;
flex-wrap: wrap;
align-content: *;
}
```
---
**Expanding Flex Items**
When there is leftover space within a flex container, flex-grow can be used to dictate how each item fits in the remaining space.
To grow a flex item (default size is 0):
```css
.flexcontainer {
display: flex;
}
.flexitem1 {
flex-grow: 1;
border: 3px solid;
}
```
*Only working when there is space remaining in a container*, `flex-grow` equals the ratio
of a container’s width/height that an item should stretch to fit to use up all leftover
container space, relative to the size of other children in the container. Similarly,
`flex-shrink` *only works when flex items are overflowing* the flex container due to insufficient space.
To shrink a flex item (default size is 0):
```css
.flexcontainer {
display: flex;
}
.flexitem1 {
flex-shrink: 1;
border: 3px solid;
}
```
To set the precise size of each flex item (default value is `flex-basis: auto;`):
```css
.flexcontainer {
display: flex;
}
.flexitem1 {
flex-basis: 25%; /*percentage value*/
}
.flexitem2 {
flex-basis: 50px; /*absolute value*/
}
.flexitem3 {
flex-basis: 5px;
}
```
To use `flex-grow`, `flex-basis` and `flex-shrink` at the same time:
```css
.flexcontainer {
display: flex;
}
.flexitem1 {
flex: 2 1 100px;
}
.flexitem2 {
5 1 5%;
}
.flexitem3 {
flex: 1 5 5%;
}
```
---
**Additional Method to Access Flex Items**
Throughout the tutorial flex items were access directly via CSS, example:
```css
.flexitem1 {
flex-shrink: 1;
}
```
However, you may want to name all flex items the same, create groups of items, etc.
To make your code more usable, you can access flexbox items by their order number
(place the order number of the item you want to alter in parenthesis):
```css
.flexitem1:nth-child(1) {
flex-shrink: 1;
}
```
Simple to learn, flexbox is a quick way to make responsive page elements.
Unlike older layout methods, such as vertically-based block or horizontally-based inline,
flexbox was designed to be adaptable to both vertical and horizontal layouts.
Automatically adjusting to whatever type of device it’s being accessed from,
flexbox is vital to modern web development. Make your pages dynamic across mobile,
tablet and PC with flexbox.
以上是关于markdown Flexbox的的主要内容，如果未能解决你的问题，请参考以下文章