The code flex: 0 1 28% applies to the H2 and paragraphs. In both the UL and Div, the heading 2 and paragraphs are the flex items that are aligned vertically. The second row of boxes uses divs as the flex item container. In the HTML code, the first row of boxes uses an unordered list as the flex container. Basically, this says to no let the items within the flexbox to grow (so we can use the extra space between them), to shrink if necessary, and to make the item width 28% Also, I added justify-content: space-between to make the items within each li or div to align vertically starting at the top of the container and ending at the bottom of the container.įinally I used flex: 0 1 28% which is shorthand for flex-grow, flew-shrink, and flex-basis. On line 20, I declare flex again, but overriding the default row with columns:įlex-flow: column nowrap This keeps the items aligned vertically. This makes each li display in a row with extra space divided between them. By default, when you declare display: flex the default is to display the items in rows. On line 10 in the css code, the list is declared as flex and content is justified to extra space is divided between the image. The following is the css I used to create the Flexbox grid and align the items within each box, H2s and paragraphs, vertically top to bottom. See the Pen Align Flexbox Items Vertically Top to Bottom by Pat Fortino ( on CodePen.dark
The code for this is pretty simple, but it took me a while to figure out the right combination of flex code. Flexbox Code to Align Flexbox Items Vertically Top to Bottom Using Flexbox for grids is so much easier than using floats and counting nth children to clear floats and padding and all the other hacks that go with float-based grids. It turns out the Flexbox is…very flexible. The hard part was to align Flexbox items vertically top to bottom. On the home page and on the blog page, I used Flexbox to create a grid of boxes, 3 boxes to a row on the desktop version. I recently built a new theme for my website.
0 kommentar(er)
