From db7335c1525c46506983ac91b99af579dae78140 Mon Sep 17 00:00:00 2001 From: ~Chiluka Akshitha <120377576+AKSHITHA-CHILUKA@users.noreply.github.com> Date: Mon, 29 Jul 2024 09:26:10 +0530 Subject: [PATCH] Create css-flexbox.md --- docs/CSS/css-flexbox.md | 184 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 184 insertions(+) create mode 100644 docs/CSS/css-flexbox.md diff --git a/docs/CSS/css-flexbox.md b/docs/CSS/css-flexbox.md new file mode 100644 index 000000000..e6998b421 --- /dev/null +++ b/docs/CSS/css-flexbox.md @@ -0,0 +1,184 @@ +# CSS Flexbox + +## Introduction +Flexbox, or the Flexible Box Layout, is a CSS layout module designed to make it easier to design flexible and responsive layout structures without using floats or positioning. + +## Basic Concepts + +### Flex Container +A flex container is an element with `display: flex`. The children of this container become flex items. + +```css +.container { + display: flex; +} +``` + +-Flex Items: +The direct children of a flex container automatically become flex items. + +```html +
+
Item 1
+
Item 2
+
Item 3
+
+``` + +# Flexbox Properties: +## Container Properties: +### flex-direction: + +-Defines the direction of the flex items. +-Possible values: row, row-reverse, column, column-reverse. + +```css +.container { + flex-direction: row; /* default */ +} +``` + +### flex-wrap: + +-Specifies whether flex items should wrap or not. +-Possible values: nowrap, wrap, wrap-reverse. + +```css +.container { + flex-wrap: wrap; +} +``` + +### justify-content: +-Defines the alignment along the main axis. +-Possible values: flex-start, flex-end, center, space-between, space-around, space-evenly. + +```css +.container { + justify-content: center; +} +``` +### align-items: +-Defines the default behavior for how flex items are laid out along the cross axis. +-Possible values: flex-start, flex-end, center, baseline, stretch + +```css +.container { + align-items: stretch; /* default */ +} +``` + +### align-content: + +-Aligns a flex container’s lines within the flex container when there is extra space in the cross-axis. +-Possible values: flex-start, flex-end, center, space-between, space-around, stretch. + +```css +.container { + align-content: stretch; /* default */ +} +``` + +# Item Properties +### order + +-Controls the order in which flex items appear in the flex container. +```css +.item { + order: 1; /* default is 0 */ +} +``` + +### flex-grow + +-Defines the ability for a flex item to grow if necessary. + +```css +.item { + flex-grow: 1; /* default is 0 */ +} +``` + +### lex-shrink + +-Defines the ability for a flex item to shrink if necessary. +```css +.item { + flex-shrink: 1; /* default is 1 */ +} +``` + +## Basic Flexbox Layout +```html + + + + + + + + +
+
Item 1
+
Item 2
+
Item 3
+
+ + +``` + +## Responsive Flexbox Layout +```html + + + + + + + + +
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
Item 5
+
+ + +``` + +## Conclusion: +Flexbox is a powerful layout tool that simplifies the process of creating complex layouts and responsive designs. With its various properties, you can control the arrangement, alignment, and spacing of elements efficiently.