专栏首页向前进Flexbox 练习和总结

Flexbox 练习和总结

练习地址: http://flexboxfroggy.com/

Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code! Guide this frog to the lilypad on the right by using the justify-content property, which aligns items horizontally and accepts the following values:

  • flex-start: Items align to the left side of the container.
  • flex-end: Items align to the right side of the container.
  • center: Items align at the center of the container.
  • space-between: Items display with equal spacing between them.
  • space-around: Items display with equal spacing around them.

Help all three frogs find their lilypads just by using justify-content. This time, the lilypads have lots of space all around them.

If you find yourself forgetting the possible values for a property, you can hover over the property name to view them. Try hovering over justify-content.

#pond {
  display: flex;
  justify-content: space-around;
}

Now the lilypads on the edges have drifted to the shore, increasing the space between them. Use justify-content. This time, the lilypads have equal spacing between them.

#pond {
  display: flex;
  justify-content: space-between;
}

Now use align-items to help the frogs get to the bottom of the pond. This CSS property aligns items vertically and accepts the following values:

  • flex-start: Items align to the top of the container.
  • flex-end: Items align to the bottom of the container.
  • center: Items align at the vertical center of the container.
  • baseline: Items display at the baseline of the container.
  • stretch: Items are stretched to fit the container.
#pond {
  display: flex;
  align-items: flex-end;
}

The frogs need to get in the same order as their lilypads using flex-direction. This CSS property defines the direction items are placed in the container, and accepts the following values:

  • row: Items are placed the same as the text direction.
  • row-reverse: Items are placed opposite to the text direction.
  • column: Items are placed top to bottom.
  • column-reverse: Items are placed bottom to top.
#pond {
  display: flex;
  flex-direction: row-reverse; 
}

Sometimes reversing the row or column order of a container is not enough. In these cases, we can apply the order property to individual items. By default, items have a value of 0, but we can use this property to set it to a positive or negative integer value.

Use the order property to reorder the frogs according to their lilypads.

#pond {
  display: flex;
}

.yellow {
  order: 1
}

Oh no! The frogs are all squeezed onto a single row of lilypads. Spread them out using the flex-wrap property, which accepts the following values:

  • nowrap: Every item is fit to a single line.
  • wrap: Items wrap around to additional lines.
  • wrap-reverse: Items wrap around to additional lines in reverse.
#pond {
  display: flex;
  flex-wrap: wrap;
}

The two properties flex-direction and flex-wrap are used so often together that the shorthand property flex-flow was created to combine them. This shorthand property accepts the value of one of the two properties separated by a space.

For example, you can use flex-flow: row wrap to set rows and wrap them.

Try using flex-flow to repeat the previous level.

#pond {
  display: flex;
  flex-flow: column wrap;
}

The frogs are spread all over the pond, but the lilypads are bunched at the top. You can use align-content to set how multiple lines are spaced apart from each other. This property takes the following values:

  • flex-start: Lines are packed at the top of the container.
  • flex-end: Lines are packed at the bottom of the container.
  • center: Lines are packed at the vertical center of the container.
  • space-between: Lines display with equal spacing between them.
  • space-around: Lines display with equal spacing around them.
  • stretch: Lines are stretched to fit the container.

This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.

#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 最近遇到的兼容性问题和适配问题

    JS: IE: 1、不能添加监听标准事件,添加polyfill initEvent: function initEvent(dom, eventName...

    SmileSmith
  • vue-cli脚手架npm相关文件解读(9)config/index.js

    系列文章传送门: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webp...

    SmileSmith
  • vue-cli脚手架npm相关文件解读(6)build.js

    系列文章传送门: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webp...

    SmileSmith
  • numpy.geomspace

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    于小勇
  • 对称排序

    In your job at Albatross Circus Management (yes, it's run by a bunch of clowns),...

    书童小二
  • 《TCP/IP 卷一》笔记、ping和traceroute 的实现思路

    一、TCP协议相关笔记 Normally TCP does not send an ACK the instant it receives data. Inst...

    s1mba
  • Palabos Tutorial 2/3:Understanding the multi-block structure

    The code structure of Palabos programs is driven by the duality between atomic-b...

    周星星9527
  • 为什么要学习现代控制理论(机器人方向)?

    一个如此重要并且可以将数字计算机优势应用于实际系统的课程,在学生看来,不过是做题和考试。

    zhangrelay
  • 提取Jar2Exe源代码,JavaAgent监控法

    最近遇见一个麻烦,明明知道是java写的小软件,但是打包成了exe,木得办法,之前打包的都有缓存能在TEMP文件夹找到。这次可不一样了,特此记录一下。

    landv
  • QTX潮玩展 | 艺展美陈空间设计揭秘

    ? 前言 Foreword 在上篇QQ潮玩展的文章里给大家分享了有关「创意品牌设计系统」的构思过程,想必大家都意犹未尽。好的展会品牌系统也要有极具创意的美陈装...

    腾讯ISUX

扫码关注云+社区

领取腾讯云代金券