Scribd
Upload
11 views2 pages

Web 15 Mark

The document outlines the properties of a Flex container in CSS, detailing how each property affects the layout of flex items. Key properties include flex-direction, flex-wrap, flex-flow, justify-content, align-items, and align-content, each with specific values that dictate the arrangement and alignment of items within the container. Examples are provided to illustrate the behavior of these properties in practice.

Uploaded by

tamilgunner
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views2 pages

Web 15 Mark

The document outlines the properties of a Flex container in CSS, detailing how each property affects the layout of flex items. Key properties include flex-direction, flex-wrap, flex-flow, justify-content, align-items, and align-content, each with specific values that dictate the arrangement and alignment of items within the container. Examples are provided to illustrate the behavior of these properties in practice.

Uploaded by

tamilgunner
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

‭19AI414 – Fundamentals of Web Application Development‬

2‭ .‬ ‭Describe‬ ‭in‬ ‭detail‬ ‭the‬ ‭properties‬ ‭of‬ ‭a‬ ‭Flex‬ ‭container‬ ‭in‬ ‭CSS.‬ ‭Explain‬ ‭how‬ ‭each‬
‭property‬ ‭influences‬ ‭the‬ ‭layout‬ ‭of‬ ‭flex‬ ‭items‬ ‭within‬ ‭the‬ ‭container.‬ ‭Provide‬ ‭suitable‬
‭examples to demonstrate the behavior of these properties.‬
‭ SS‬‭Flexbox,‬‭or‬‭Flexible‬‭Box‬‭Layout,‬‭is‬‭the‬‭layout‬‭model‬‭designed‬‭to‬‭create‬‭flexible‬
C
‭and‬‭responsive‬‭layout‬‭structures‬‭without‬‭using‬‭float‬‭or‬‭positioning.‬‭By‬‭applying‬‭display:‬‭flex‬
‭to‬ ‭a‬ ‭parent‬ ‭container,‬ ‭it‬ ‭becomes‬ ‭a‬ ‭flex‬ ‭container,‬ ‭and‬ ‭its‬ ‭children‬ ‭become‬‭flex‬‭items.‬‭This‬
‭allows control over the items’ growth, shrinkage, and space distribution.‬

‭A) The flex-direction Property‬


‭The‬‭flex-direction‬‭property‬‭defines‬‭in‬‭which‬‭direction‬‭the‬‭container‬‭wants‬‭to‬‭stack‬‭the‬
‭flex items.‬
‭➢‬ ‭The‬‭column‬‭value stacks the flex items vertically‬‭(from top to bottom)‬
‭➢‬ ‭The‬‭column-reverse‬‭value‬‭stacks‬‭the‬‭flex‬‭items‬‭vertically‬‭(but‬‭from‬‭bottom‬‭to‬
‭top)‬
‭➢‬ ‭The‬‭row‬‭value stacks the flex items horizontally (from‬‭left to right)‬
‭➢‬ ‭The‬‭row-reverse‬‭value stacks the flex items horizontally‬‭(but from right to left)‬

‭Example‬
‭.flex-container‬
‭{‬
‭display: flex;‬
‭flex-direction: column;‬
‭}‬

‭B) The flex-wrap Property‬


‭The flex-wrap property specifies whether the flex items should wrap or not.‬
‭➢‬ ‭The‬‭wrap‬‭value specifies that the flex items will‬‭wrap if necessary‬
‭➢‬ ‭The‬‭nowrap‬‭value specifies that the flex items will‬‭not wrap‬
‭➢‬ ‭The‬‭wrap-reverse‬‭value‬‭specifies‬‭that‬‭the‬‭flexible‬‭items‬‭will‬‭wrap‬‭if‬‭necessary,‬
‭in reverse order‬

‭Example‬
‭.flex-container‬
‭{‬
‭display: flex;‬
‭flex-wrap: wrap;‬
‭}‬

‭C) The flex-flow Property‬


‭The‬‭flex-flow‬‭property‬‭is‬‭a‬‭shorthand‬‭property‬‭for‬‭setting‬‭both‬‭the‬‭flex-direction‬‭and‬
‭flex-wrap properties.‬

‭Example‬
‭.flex-container‬
‭{‬
‭display: flex;‬
‭flex-flow: row wrap;‬
‭}‬

‭June 2025 Unit - 3‬ ‭Prepared by‬‭Dr.R.Selvakumar‬ ‭21‬


‭19AI414 – Fundamentals of Web Application Development‬

‭D) The justify-content Property‬


‭The justify-content property is used to align the flex items‬
‭➢‬ ‭The‬‭center‬‭value aligns the flex items at the center‬‭of the container‬
‭➢‬ ‭The‬‭flex-start‬‭value aligns the flex items at the‬‭beginning of the container‬
‭➢‬ ‭The‬‭flex-end‬‭value aligns the flex items at the end‬‭of the container‬
‭➢‬ ‭The‬ ‭space-around‬ ‭value‬ ‭displays‬ ‭the‬ ‭flex‬ ‭items‬ ‭with‬ ‭space‬ ‭before,‬ ‭between,‬
‭and after the lines‬
‭➢‬ ‭The‬‭space-between‬‭value displays the flex items with‬‭space between the lines‬

‭Example‬
‭.flex-container‬
‭{‬
‭display: flex;‬
‭justify-content: center;‬
‭}‬

‭E) The align-items Property‬


‭The align-items property is used to align the flex items.‬
‭➢‬ ‭The‬‭center‬‭value aligns the flex items in the middle‬‭of the container‬
‭➢‬ ‭The‬‭flex-start‬‭value aligns the flex items at the‬‭top of the container‬
‭➢‬ ‭The‬‭flex-end‬‭value aligns the flex items at the bottom‬‭of the container‬
‭➢‬ ‭The‬‭stretch‬‭value stretches the flex items to fill‬‭the container‬
‭➢‬ ‭The‬‭baseline‬‭value aligns the flex items such as their‬‭baselines aligns‬

‭Example‬
‭.flex-container‬
‭{‬
‭display: flex;‬
‭align-items: center;‬
‭}‬

‭F) The align-content Property‬


‭The align-content property is used to align the flex lines.‬
‭➢‬ ‭The‬ ‭space-between‬ ‭value‬ ‭displays‬ ‭the‬ ‭flex‬ ‭lines‬ ‭with‬ ‭equal‬ ‭space‬ ‭between‬
‭them‬
‭➢‬ ‭The‬ ‭space-around‬ ‭value‬ ‭displays‬ ‭the‬ ‭flex‬ ‭lines‬ ‭with‬ ‭space‬ ‭before,‬ ‭between,‬
‭and after them‬
‭➢‬ ‭The‬‭stretch‬‭value stretches the flex lines to take‬‭up the remaining space‬
‭➢‬ ‭The‬‭center‬‭value displays the flex lines in the middle‬‭of the container‬

‭Example‬
‭.flex-container‬
‭{‬
‭display: flex;‬
‭height: 600px;‬
‭flex-wrap: wrap;‬
‭align-content: space-around;‬
‭}‬

‭June 2025 Unit - 3‬ ‭Prepared by‬‭Dr.R.Selvakumar‬ ‭22‬

You might also like