Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use flexbox in CSS, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Setting Flexbox as the parent element is a very important point. First enter the parent element of the project you want to apply, as shown below.

Display:flex

To apply to inline elements, enter the following.

Display:inline-flex

The element that writes this will automatically become the "Flex container" and its child element will be "Flexbox", which makes the Flexbox attribute available. Let's write some typical attributes.

The use of flex-direction

Flex-direction is an attribute that can specify how the content is arranged.

Let's create the following HTML and CSS and change the value of flex-direction in CSS

HTML code

1 2 3 4 5

CSS code

Style.css .menu {display:flex; flex-direction:row;} .item {text-align:center; width:50px; height:20px; padding:3%; margin:3%; background-color:#c97796; color:white;} these are all the contents of this article entitled "how to use flexbox in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.