Flexboxレイアウトの簡潔なガイド-パート1

To flex or not to flex, that is the question! I think that Flexbox is really useful when you want to build a responsive website. Flexbox gives you the power to lay out elements the way you want and easily align elements on your web pages and components. It is really easy to center things when you use Flexbox, I will show you how soon. Moreover, Flexbox allow you change the widths and heights of the Flex Items so that it fits the available spaces, this is why it is good for responsive design. Flexbox deals with directional flow of the Flex Items, whether it be row or column direction, so it can be said that Flexbox is a one-dimensional layout.

Anyway, to begin using Flexbox, just slap display: flex on your container element, this element will now be known as the Flex Container, and all the immediate children of this element will be known as Flex Items.

There are many Flex Container CSS properties that will allow you to move the Flex Items about, lets take a look at them.

As always, I will show some examples with the properties but you really do learn best when you try it out yourself. Lets start with some basic set up, a Flex Container with defined size, and display: flex on it. You will notice that, each of the Flex Items loses it's block property and are now lined up in a row next to each other.

.flex-container {
  width: 400px;
  height: 400px;
  outline: 1px solid black;
  display: flex;
}

.flex-item {
  width: 60px;
  height: 50px;
  outline: 1px solid black;
}

The properties I will talk about are flex-direction , flex-wrap , justify-content , align-items , align-content and gap .

There is a bit of a pattern when you start using Flexbox, so don't worry if you can't remember them, you can always look them up or just test them using the DevTool.

• flex-direction determines which direction you want the Flex Items to flow, row (default), row-reverse, column or column-reverse.