6d49b972fb
* Create index.md This file introduces flex-grow: with screen shots and code samples. As with all of my commits, this is a proper contribution effort, neither copy & paste nor a links list. * Update index.md Added title: 'Flex Grow' to avoid Travis CL no frontmatter error. * Update index.md Added labels to the code blocks. * fix: updated individual code items & sentences Added <code></code> tags to individual code items. Sorry for so many commits. I just saw the styling guide. * Create flexbox-display-flex.md (#2) * Create flexbox-display-flex.md This file introduces the concept of display:flex and flex-direction:[row | column]. * Rename guide/english/css/flexbox-display-flex.md to guide/english/css/flexbox-display-flex/index.md Changed the folder structure to comply with index.md. * Update index.md Added title: Display Flex to avoid Travice CL no frontmatter error. * Update index.md Added labels to the code blocks. * fix: update individual code items. Added <code></code> tags to individual code items. Sorry for so many commits. I just saw the styling guide. * Create index.md (#4) * Create index.md This file contains details about flex-basis, with screenshots and code samples. As with all of my commits, this is my own work not copy & paste or a lazy linkathon. * Update index.md Added the title; Flex Basis, to avoid Travis CI no frontmatter error. * Update index.md Added labels to the code blocks. * fix: added labels for code items Added <code></code> labels to individual code items. Sorry for all of the commits. I just saw the styling guide. Doing my own QC.
1.5 KiB
1.5 KiB
title
| title |
|---|
| Flex Basis |
Flex-basis
To determine the initial width or height of a flex element along the main axis, we can use flex-basis: instead of width: or height:. flex-basis: is dynamic, so it can shrink or grow to fit inside the flex container.
flex-basis: can be set as a value, e.g. 200px; 20vw; 50vh; or auto. Auto will assess the contents of the flex item and expand or contract with them. Example 1 shows a nested div with flex-basis: 20vw;, while the second and third use flex-basis: auto;.
Example 1:
.container {
display: flex;
flex-direction: row;
justify-content: center;
background-color: yellow;
}
.box {
background-color: brown;
flex-basis: 20vw;
height: 200px;
box-sizing: border-box;
border: solid 1px black;
color: white;
}
<div class="container">
<div class="box">Box 1</div>
</div>
Examples 2 and 3:
.box {
background-color: brown;
flex-basis: auto;
height: 200px;
box-sizing: border-box;
border: solid 1px black;
color: white;
}
