Flexbox Layout
Basic Flex
This is a basic flex layout where the parent container-flex is set to display flex and the the items to wrap. The text will align to the top of the div, and the items will 'stretch' to the longest. Stretch is the defualt value in flex.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec leo mauris. Fusce in tempor sem, at dignissim metus. Pellentesque ac tellus enim. Sed tempor, justo quis imperdiet commodo, velit neque ullamcorper ex, ac scelerisque elit nibh sed diam. Suspendisse tellus orci, ullamcorper eu turpis nec, fermentum fringilla orci. Quisque cursus massa neque, in feugiat lacus varius id. Sed sagittis purus consectetur ornare cursus. Aliquam erat volutpat. Integer tincidunt ligula vitae magna blandit, sit amet faucibus odio porttitor. Phasellus feugiat dolor purus. Quisque efficitur vulputate justo ut fermentum. Phasellus aliquet velit vitae tincidunt elementum. Mauris lobortis velit at odio mattis, id aliquam massa luctus. Mauris viverra dapibus odio, eu dapibus massa accumsan in. Sed vestibulum congue magna et dignissim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec leo mauris. Fusce in tempor sem, at dignissim metus. Pellentesque ac tellus enim. Sed tempor, justo quis imperdiet commodo, velit neque ullamcorper ex, ac scelerisque elit nibh sed diam. Suspendisse tellus orci, ullamcorper eu turpis nec, fermentum fringilla orci.
Flex Basis
Some Text 1
Some text 2. The flex basis command is set to auto so the text will keep filling up the available space.
Align Vertically
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec leo mauris. Fusce in tempor sem, at dignissim metus. Pellentesque ac tellus enim. Sed tempor, justo quis imperdiet commodo, velit neque ullamcorper ex, ac scelerisque elit nibh sed diam. Suspendisse tellus orci, ullamcorper eu turpis nec, fermentum fringilla orci. Praesent luctus risus dictum, consequat massa vel, viverra orci. Quisque cursus massa neque, in feugiat lacus varius id. Sed sagittis purus consectetur ornare cursus. Aliquam erat volutpat. Integer tincidunt ligula vitae magna blandit, sit amet faucibus odio porttitor. Phasellus feugiat dolor purus. Quisque efficitur vulputate justo ut fermentum. Phasellus aliquet velit vitae tincidunt elementum. Mauris lobortis velit at odio mattis, id aliquam massa luctus. Mauris viverra dapibus odio, eu dapibus massa accumsan in. Sed vestibulum congue magna et dignissim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec leo mauris. Fusce in tempor sem, at dignissim metus. Pellentesque ac tellus enim. Sed tempor, justo quis imperdiet commodo, velit neque ullamcorper ex, ac scelerisque elit nibh sed diam. Suspendisse tellus orci, ullamcorper eu turpis nec, fermentum fringilla orci.
Column Layout
Equal Space
Using Lists
- 1
- 2
- 3
- 4
- 5
- 6
Using div's
Thanks this CSS Tricks for this example.
Vertically align with items the same height
Container where items don't wrap
This is a flex container set to 'no wrap' so however many items there are it will always stay on one line.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec leo mauris. Fusce in tempor sem, at dignissim metus. Pellentesque ac tellus enim. Sed tempor, justo quis imperdiet commodo, velit neque ullamcorper ex, ac scelerisque elit nibh sed diam. Suspendisse tellus orci, ullamcorper eu turpis nec, fermentum fringilla orci. Quisque cursus massa neque, in feugiat lacus varius id. Sed sagittis purus consectetur ornare cursus. Aliquam erat volutpat. Integer tincidunt ligula vitae magna blandit, sit amet faucibus odio porttitor. Phasellus feugiat dolor purus. Quisque efficitur vulputate justo ut fermentum. Phasellus aliquet velit vitae tincidunt elementum. Mauris lobortis velit at odio mattis, id aliquam massa luctus. Mauris viverra dapibus odio, eu dapibus massa accumsan in. Sed vestibulum congue magna et dignissim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec leo mauris. Fusce in tempor sem, at dignissim metus. Pellentesque ac tellus enim. Sed tempor, justo quis imperdiet commodo, velit neque ullamcorper ex, ac scelerisque elit nibh sed diam. Suspendisse tellus orci, ullamcorper eu turpis nec, fermentum fringilla orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec leo mauris. Fusce in tempor sem, at dignissim metus. Pellentesque ac tellus enim. Sed tempor, justo quis imperdiet commodo, velit neque ullamcorper ex, ac scelerisque elit nibh sed diam. Suspendisse tellus orci, ullamcorper eu turpis nec, fermentum fringilla orci.
Vertical Align Center
Much less text than on the right-hand side.
Vertical Align Text Center
This is a display flexbox. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla malesuada dui maximus blandit. Donec consectetur dignissim maximus. Pellentesque aliquam dapibus ullamcorper. Maecenas iaculis, nibh id rutrum auctor, felis ligula feugiat odio, in ultrices magna arcu consectetur mi. Nulla euismod enim in mi interdum, sit amet dictum mi posuere.
Sed vitae elit varius nisi posuere egestas a non velit. In ultricies scelerisque risus vitae interdum. Sed lacinia ipsum sed sapien vulputate placerat. Pellentesque a tincidunt felis. Nunc placerat ullamcorper nisl, ut rhoncus massa tristique ac.
Custom Flex Layout 1
Traveling to a match by train? Save money on the cost of your ticket by booking via Trainline
Custom Flex 2
Due to the Coronavirus Pandemic the Toronto Raptors will play in Tampa, Florida for the 2021 season.