‭CSS Flex Container Properties‬

‭ SS Flexbox (Flexible Box Layout) is a layout model in CSS3 designed to create‬

C
‭responsive, flexible layouts without relying on float or positioning. A container becomes a‬‭flex‬
‭container‬‭when‬‭ display: flex‬‭is applied, and its direct children become‬‭flex items‬‭.‬
‭Below are the key properties that can be used to control the behavior and layout of these‬
‭items.‬

flex-direction‬
‭1.‬‭

‭ his property defines the‬‭main axis‬‭direction in which the flex items are placed inside the‬
T
‭container.‬

‭●‬ ‭
row‬
‭: (default) Items are placed from left to right.‬
‭●‬ ‭
row-reverse‬
‭: Items are placed from right to left. <‬
‭●‬ ‭
column‬
‭: Items are placed from top to bottom.‬
‭●‬ ‭
column-reverse‬
‭: Items are placed from bottom to top.‬

‭📌‬‭Example:‬

flex-container {‬
‭

display: flex;‬
‭

flex-direction: column;‬
‭
}‬
‭

flex-wrap‬
‭2.‬‭

‭Determines whether the flex items should wrap onto multiple lines or stay on a single line.‬

‭●‬ ‭
Nowrap‬‭: (default) All items stay in one line.‬
‭●‬ ‭
wrap‬
‭: Items wrap to the next line if needed.‬
‭●‬ ‭
wrap-reverse‬
‭: Items wrap in reverse order.‬

‭📌‬‭Example:‬

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

flex-direction‬‭and‬‭
‭This is a shorthand for‬‭ flex-wrap‬‭together.‬

‭📌‬‭Example:‬

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

justify-content‬
‭4.‬‭

A flex-direction: row‬
‭ ligns flex items along the‬‭main axis‬‭(horizontal‬‭if‬‭ ‭, vertical if‬
‭column).‬

‭●‬ ‭
flex-start‬
‭: Items aligned at the beginning.‬
‭●‬ ‭
flex-end‬
‭: Items aligned at the end.‬
‭●‬ ‭
center‬
‭: Items are centered.‬
‭●‬ ‭
space-between‬
‭: Items are spaced evenly, with no space at the ends.‬
‭●‬ s
‭pace-around‬ ‭: Items are spaced evenly, including space‬‭before the first and after‬
‭the last item.‬

‭📌‬‭Example:‬

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

align-items‬
‭5.‬‭

‭Aligns items along the‬‭cross axis‬‭(perpendicular to‬‭main axis).‬

‭●‬ ‭
flex-start‬
‭: Aligned to the top (or left for column).‬
‭●‬ ‭
flex-end‬
‭: Aligned to the bottom (or right for column).‬
‭●‬ ‭
center‬
‭: Centered vertically (or horizontally).‬
‭●‬ ‭
stretch‬
‭: Stretches to fill the container (default).‬
‭●‬ ‭
baseline‬
‭: Aligns based on text baselines.‬

‭📌‬‭Example:‬

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

align-content‬
‭6.‬‭

‭ ligns‬‭multiple lines‬‭of flex items when there is‬‭extra space in the cross axis. It only applies‬
A
flex-wrap‬‭is enabled and items span multiple lines.‬
‭if‬‭

‭●‬ ‭
flex-start‬ flex-end‬
‭,‬‭ center‬
‭,‬‭
‭●‬ ‭
space-between‬ space-around‬
‭,‬‭
‭●‬ ‭
stretch‬

‭📌‬‭Example:‬

.flex-container {‬
‭
display: flex;‬
‭
height: 600px;‬
‭
flex-wrap: wrap;‬
‭
align-content: space-around;‬
‭
}‬
‭
‭ escribe the concept of managing users in Django‬
D
‭admin (13 Marks)‬
I‭n Django, users are people who interact with the web application. The Django admin‬
‭interface allows managing users efficiently. There are two main types of users:‬‭normal‬
‭users‬‭and‬‭superusers (admins)‬‭. The admin interface‬‭helps with creating, editing, grouping,‬
‭and managing user permissions.‬

‭A) Creating Users‬

‭Users can be created in two ways:‬

‭1. Programmatically using code:‬

from django.contrib.auth.models import User‬

‭
user = User.objects.create_user('XYZ', '[email protected]')‬
‭
user.last_name = 'ABC'‬
‭
user.save()‬
‭

‭2. Through the Django admin interface:‬

‭‬ N
● ‭ avigate to the Users section.‬
‭●‬ ‭Click the green‬‭“+”‬‭button to add a new user.‬
‭●‬ ‭Set a username and password.‬

‭Creating a Superuser:‬

‭ uperusers have full access to the admin panel.‬

S
‭To create one, use the terminal:‬

python manage.py createsuperuser‬

‭

‭You’ll be asked to enter a username, email, and password.‬

‭B) User Permissions and Status‬

‭‬ B
● ‭ y default, new users have no permissions.‬
‭●‬ ‭Admins can set user roles using the‬‭admin panel‬‭.‬
‭●‬ ‭Permissions can be changed using:‬
‭python‬

user.user_permissions.set([...])‬
‭
user.user_permissions.add(permission1, permission2)‬
‭
user.user_permissions.remove(permission)‬
‭

‭●‬ ‭Checkboxes like‬‭Active‬‭,‬‭Staff‬‭, and‬‭Superuser‬‭define‬‭user privileges.‬

‭C) Managing Groups‬

‭Groups help manage users with similar roles efficiently.‬

‭1. Creating Groups:‬

‭●‬ ‭Go to the‬‭Groups‬‭section in the admin.‬

‭●‬ ‭Click‬‭Add‬‭, set the group name and permissions, then‬‭save.‬

‭2. Assigning Users to Groups:‬

‭●‬ ‭Go to the user’s profile in the admin.‬

‭●‬ ‭Use the dropdown to add them to one or more groups.‬

‭3. Group Permissions:‬

‭●‬ ‭Permissions given to a group apply to all its users.‬

‭●‬ E
‭ xample: An "Editor" group can be given permission to modify content. All users in‬
‭this group get the same access.‬
 ‭19AI414 – Fundamentals of Web Application Development‬

7‭ .‬ ‭Illustrate‬ ‭and‬ ‭describe‬‭the‬‭architecture‬‭and‬‭working‬‭of‬‭a‬‭web‬‭server‬‭with‬‭a‬‭suitable‬

‭diagram.‬
‭A‬‭web‬‭server‬‭is‬‭a‬‭combination‬‭of‬‭hardware‬‭and‬‭software‬‭that‬‭uses‬‭HTTP‬‭that‬‭respond‬
‭to requests from clients made on the World Wide Web. ‬

‭Working of a Web Server‬

‭1.‬ F‭ irst,‬‭any‬‭web‬‭user‬‭is‬‭required‬‭to type‬‭the‬‭URL‬‭of‬‭the‬‭web‬‭page‬‭in‬‭the‬‭address‬‭bar of‬

‭your web browser.‬
‭2.‬ W‭ ith‬ ‭the‬ ‭help‬ ‭of‬ ‭the‬ ‭URL,‬ ‭your web‬ ‭browser‬ ‭will‬ ‭fetch‬ ‭the‬ ‭IP‬ ‭address‬ ‭of‬ ‭your‬
‭domain name via DNS or cache memory.‬
‭3.‬ A‭ fter‬‭making‬‭the‬‭connection,‬‭the web‬‭browser‬‭will‬‭request‬‭for‬‭the‬‭web‬‭page‬‭from‬‭the‬
‭web server with the help of an HTTP request.‬
‭4.‬ A‭ s‬ ‭soon‬ ‭as‬ ‭the‬ ‭web‬ ‭server‬‭receives‬‭this‬‭request,‬‭it‬‭immediately responds‬‭by‬‭sending‬
‭back the requested page or file to the web browser HTTP.‬
‭5.‬ I‭ f‬‭the‬‭web‬‭page‬‭requested‬‭by‬‭the browser‬‭does‬‭not‬‭exist‬‭or‬‭if‬‭there‬‭occurs‬‭some‬‭error‬
‭in the process, the web server will return an error message.‬

‭Types of web servers‬

‭i. Mail Server‬

‭In‬ ‭a‬ ‭mail‬ ‭server,‬ ‭you‬ ‭get‬ ‭a‬ ‭centrally-located‬ ‭pool‬ ‭of‬ ‭disk‬ ‭space‬ ‭to‬ ‭store‬ ‭and‬ ‭share‬
‭different documents in the form of emails for network users.‬

‭June 2025 Unit - 1‬ ‭Prepared by‬‭Dr.R.Selvakumar‬ ‭15‬

 ‭19AI414 – Fundamentals of Web Application Development‬

‭ii. Application Server‬

‭It‬‭acts‬‭as‬‭a‬‭set‬‭of‬‭components‬‭which‬‭can‬‭be‬‭accessed‬‭by‬‭the‬‭software‬‭developer‬‭via‬‭an‬
‭API defined by the platform itself.‬

‭iii. File Transfer Protocol (FTP) Server‬

‭ ‬ ‭separate‬ ‭control‬ ‭and‬ ‭data‬‭connections‬‭are‬‭used‬‭by‬‭the‬‭FTP‬‭between‬‭the‬‭client‬‭and‬

A
‭the server.‬

‭iv. Database Server‬

‭A‬ ‭computer‬ ‭program‬ ‭that‬ ‭offers‬ ‭database‬ ‭services‬ ‭to‬ ‭other‬ ‭computer‬ ‭programs‬ ‭or‬
‭computers with the use of client-server functionality is called a database server.‬

‭June 2025 Unit - 1‬ ‭Prepared by‬‭Dr.R.Selvakumar‬ ‭16‬