- String Length Calculator
- MD5 Hash Generator
- Sha256 Hash Generator
- String Reverse
- URL Encoder
- URL Decoder
- Base 64 Encoder
- Base 64 Decoder
- Extra Spaces Remover
- String to Lowercase
- String to Uppercase
- Word Count Calculator
- Empty Lines Remover
- HTML Tags Remover
- Binary to Hex
- Hex to Binary
- Rot13 Transform on a String
- String to Binary
- Duplicate Lines Remover
How to Set Space Between Flexbox Items
Flexbox is a single-dimensional layout, which lays items in one dimension at a time (either as a row or as a column).
The main purpose of the Flexbox Layout is to distribute space between items of a container. It works even in those cases when the item size is unknown or dynamic.
You can easily set distance between flexbox items using theCSS justify-content property. In this snippet, we’ll show how to do this.
Create HTML
- Create three<div> elements having a class name "flex-items":
<!DOCTYPEhtml><html><head><title>Title of the document</title></head><body><h1>Space between flexbox</h1><h2>justify-content: space-around</h2><divclass="flex2"><divclass="flex-items">1</div><divclass="flex-items">2</div><divclass="flex-items">3</div></div><h2>justify-content: space-between</h2><divclass="flex3"><divclass="flex-items">1</div><divclass="flex-items">2</div><divclass="flex-items">3</div></div></body></html>Add CSS
- Set the justify-content property to "space-around" for the .flex2 element.
- Set the justify-content property to "space between" for the .flex3 element.
- Set thedisplay property to “flex” for both elements.
- Add style using thewidth,height,background-color,margin, and other properties.
.flex {display: flex;font-size:30px;text-align: center;background-color:#7d7d7d;color:#000000;font-weight: bold;}.flex2 {justify-content: space-around;}.flex3 {justify-content: space-between;}.flex-items {background-color:#cccaca;width:90px;height:60px;margin:10px;text-align: center;font-size:40px;line-height:1.5;}Let’s see the result of our code.
Example of setting distance between flexbox items:
<!DOCTYPEhtml><html><head><title>Title of the document</title><style>.flex {display: flex;font-size:30px;text-align: center;background-color:#7d7d7d;color:#000000;font-weight: bold; }.flex2 {justify-content: space-around; }.flex3 {justify-content: space-between; }.flex-items {background-color:#cccaca;width:90px;height:60px;margin:10px;text-align: center;font-size:40px;line-height:1.5; }</style></head><body><h1>Space between flexbox</h1><h2>justify-content: space-around</h2><divclass="flex flex2"><divclass="flex-items">1</div><divclass="flex-items">2</div><divclass="flex-items">3</div></div><h2>justify-content: space-between</h2><divclass="flex flex3"><divclass="flex-items">1</div><divclass="flex-items">2</div><divclass="flex-items">3</div></div><br></body></html>Result
In the example mentioned above, we have used the justify-content property with two of its values: space-between and space-around. The space-between value distributes the items evenly (with space between them) in the line. The first item is on the start line, and the last one is on the end line. The space-around value displays the items with space before, between, and after.
Setting vertical space between Flexbox items
For vertical spacing, you can use thealign-items property with thespace-between value. This will distribute the items evenly in the container, with space between them vertically. Again, you can adjust the amount of space with themargin property on the items.
Here comes an example to showcase this:
<!DOCTYPEhtml><html><head><title>Setting vertical space between Flexbox items</title><style>.container {display: flex;flex-direction: column;align-items: space-between;background: yellow; }.item {margin-bottom:10px;border:1px solid red; }</style></head><body><divclass="container"><divclass="item">Item 1</div><divclass="item">Item 2</div><divclass="item">Item 3</div></div></body></html>Evenly spacing Flexbox items in a column direction
To evenly space Flexbox items in a column direction, you can use thejustify-content property with thespace-between orspace-around value, and setalign-items tocenter to align the items in the center of the container.
<!DOCTYPEhtml><html><head><title>Evenly spacing Flexbox items in a column direction</title><style>.container {display: flex;flex-direction: column;justify-content: space-between;align-items: center;background: yellow; }.item {margin-bottom:10px;border:1px solid red; }</style></head><body><divclass="container"><divclass="item">Item 1</div><divclass="item">Item 2</div><divclass="item">Item 3</div></div></body></html>In this example,margin-bottom is added to give some space between the items in a column direction, asjustify-content: space-between only distributes items vertically.
How to reduce the space between Flexbox items?
To reduce the space between Flexbox items using thespace-between orspace-around value, you can adjust themargin property on the items themselves. For example, to reduce the space between items usingjustify-content: space-between, you can decrease themargin-right (ormargin-bottom for a column direction) on each item. Forjustify-content: space-around, you can decrease themargin on each item by half of the desired space reduction.
Here's an example for reducing the space between Flexbox items using justify-content: space-between:
<!DOCTYPEhtml><html><head><title>Evenly spacing Flexbox items in a column direction</title><style>.container {display: flex;justify-content: space-between;background: yellow; }.item {margin-right:20px;/* Initial margin-right */border:1px solid red; }.item:last-child {margin-right:0;/* Remove margin-right on last item */ }</style></head><body><divclass="container"><divclass="item">Item 1</div><divclass="item">Item 2</div><divclass="item">Item 3</div></div></body></html>In this example, themargin-right on each item is initially set to 20px to create some space between the items usingjustify-content: space-between. To reduce the space between the items, themargin-right on the last item is set to 0 to remove the space on the right side of the last item. You can adjust themargin-right value on the items to your desired spacing.
Similarly, forjustify-content: space-around, you can reduce themargin on each item by half of the desired space reduction. For example, if you want to reduce the space between items by 10px, you can setmargin-right: 5px on each item.