共计 1052 个字符，预计需要花费 3 分钟才能阅读完成。
https://developer.mozilla.org…
- 列表项目
You can see in the live example below how this looks. Try editing the items or adding additional items in order to test the initial behavior of flexbox.
- 列表项目
The live example below has flex-direction set to row-reverse. Try the other values — row, column and column-reverse — to see what happens to the content.
- 列表项目
As flex-wrap is set to wrap, the items wrap. Set it to nowrap, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.
- 列表项目
Try the following values of justify-content in the live example:
flex-start
flex-end
center
space-around
space-between
space-evenly
- 列表项目
You could instead set align-items to flex-start in order to make the items line up at the start of the flex container, flex-end to align them to the end, or center to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:
stretch
flex-start
flex-end
center
