简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

How to use flex layout to distribute columns

高洛峰
Release： 2017-03-15 10:05:07
Original
2728 people have browsed it

This article introduces the method of using flex layout to distribute columns

html code

<div class=&#39;items&#39;>
    <div class=&#39;item&#39;></div>
    <div class=&#39;item&#39;></div>
    <div class=&#39;item&#39;></div>
</div>
Copy after login

css code

items:{

　 display:flex;

flex-direction:column;
-webkit-flex-direction:column;
-moz-flex-direction:column;
　-o-flex-direction:column;

}

.item{

　height:40px;

}


The above is the detailed content of How to use flex layout to distribute columns. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
flex column
source：php.cn
Previous article：Code demonstration to implement canvas Bezier curve effect Next article：How to add the website logo before the title of the title bar
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have? I have the following CSS code that is part of a larger CSS code used in a website I'm deve...
From 2024-04-06 20:41:51
0
1
518
How do I tune these cards to respond with Boostrap 4? How can I make each row display 4 cards, and of course make them stack if the screen size ...
From 2024-04-05 10:48:45
0
1
4072
Center align DIV with content on both sides So I have 5 items (within the containing DIV). The line-up of items is as follows: Text Im...
From 2024-04-04 23:19:14
0
1
3438
CSS and HTML methods for moving paragraphs to the left on mobile sized screens It looks perfect on a normal 16:9 computer screen, with text on the left and images on the...
From 2024-04-04 20:25:22
0
1
330
Change image opacity when selecting option from form How can I change the opacity of idMaster's image to 1 when I select the option with value ...
From 2024-04-03 23:00:48
0
2
304
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！