Forem: Prerna Sharma

Coding Period GSoC'23 | Week 11 + 12

Prerna Sharma — Sun, 27 Aug 2023 18:53:50 +0000

It's with a bittersweet mix of emotions that I welcome you to the final of my exhilarating GSoC 2023 journey. Can you believe it? We've reached the end of this journey.

Now, Let's take a look at the work done in the last two weeks.

Work Done (11th August - 24th August)

First and foremost, I started working on completing the 'Moving a component mess up the connected wire pull request'. As I mentioned in my previous blog, this PR was not yet completed. In this PR, I have mainly tried to improve the way wiring connections are handled. Previously, even a slight movement of components resulted in tangled wires, but the new implementation significantly mitigates this issue. This enhancement is expected to greatly benefit users. With the new implementation, now when components are moved, their connections are less likely to be disrupted. For this, I changed the positions of node creations.

After that, I was looking for the data-integrity issues on #simulator-issues slack channel, and I came across an issue that error messages are being persistent and do not disappear even after resolving the issues. I addressed it by implementing a fix. Previously, when an error message was displayed on the canvas and a user clicked on it multiple times in quick succession, the message persisted even after the error was resolved. I resolved this problem, ensuring that error messages are now properly removed once the issue is resolved. For this, I declared a new global variable named fadeTimeOut, which is used to store the timeout ID for fading out an error message after a delay. Then, I added a check in the showError function, responsible for displaying errors on the canvas, to clear the previous timeout if it exists.

After that, I discussed this task with my mentors: Identifying areas where defensive coding practices are needed instead of assuming data will always be in the proper format. We found that the reason this task was created is somewhat related to what we handled in another task where we created a state machine, so this task is a bit unclear to us. Therefore, we decided to leave this task.

Pull Request

Fix: Moving a component mess up the connected wires

Feedbacks on Pull Requests

Future Plan

Now, I have resolved to extend my efforts in aiding new contributors and helping to continue the maintenance of the CircuitVerse simulator.

That's all for now. Thank you for reading!

Coding Period GSoC'23 | Week 9 + 10

Prerna Sharma — Sun, 13 Aug 2023 10:23:41 +0000

Welcome back to another progress update on my GSoC'2023 journey.

Work Done (26th July - 10th August):

Let's begin with a dive into the work that's been accomplished. As I mentioned in my previous blog post, my primary focus this week was to complete a significant task: PR. This pull request involved designing and implementing a modal for an enhanced simulation area, where users could edit erroneous circuits. Over the course of 4-5 days, I brainstormed different approaches and attempted their implementation.

My goal was to create a modal that allowed users to edit erroneous circuits directly in the simulation area. This required careful thought and effort, and I explored various techniques to achieve this. However, I encountered challenges in finding an effective solution. Seeking guidance, I had a discussion with my mentors, where I shared my ideas and concerns. They advised me that implementing a simulation area with error editing functionality could be quite complex, and suggested prioritizing the core functionality and addressing UI concerns later.

Taking their advice, I focused on ensuring the proper working of the state machine and retaining the initially planned UI design. Essentially, whenever an error exists within the circuit, all tabs will remain hidden. Once the erroneous component is removed, all tabs become visible. This ensures a seamless user experience during circuit editing.

Moving forward, I tackled two key tasks related to data integrity:

- Delay 0 on Non-Input/Output Components:
The challenge here was that components could be set with a delay of 0, but this setting couldn't be saved. To address this, I implemented a solution by introducing a condition that allows components with a propagation delay of zero to be saved with the appropriate value. This ensures that components behave as expected, even with a delay of zero.

- Maintaining Wire Connections While Moving Components
In this challenge, I encountered issues with connected wires becoming disarrayed when moving a component. The existing system only checked if a component's nodes had moved to different y or x-coordinates. To prevent overlapping or collisions, I'm in the process of developing a more robust collision detection system. While this task is still a work in progress, I'm dedicated to finding a comprehensive solution.

What's Next?

As the end of the Google Summer of Code (GSoC) program draws near, I have a clear roadmap for the remaining tasks. With only a few days left, I have one task left to tackle:

Identifying areas where defensive coding practices are needed instead of assuming data will always be in the proper format.

This task will be my focus in the upcoming weeks. Additionally, I'll be working on completing the pending work in PR.

Stay tuned for more updates and progress in the coming weeks!

Coding Period GSoC'23 | Week 7+8

Prerna Sharma — Tue, 25 Jul 2023 13:55:36 +0000

Welcome back to another progress update on my GSoC' 2023 journey.

Journey So Far

My GSoC journey so far has been absolutely amazing.
I am delighted to share that I have successfully passed the mid-term evaluation, and I couldn't be happier with the progress made so far! My journey has been a fulfilling one, with ample support from my mentor, making this experience smooth and enjoyable. 💃🥳

Work Done (11th July - 25th July):

After the mid-term evaluation, I began working on the state machine task, following the valuable suggestions provided by my mentors. The primary objective was to implement a modal that opens whenever an uncaught exception error occurs during the simulation. Inside the modal, I endeavored to create a simulation area similar to the one found in the simulator canvas. This task has progressed significantly, but I encountered some challenges during testing, leading to several failed tests. To ensure a robust solution, I have decided to put this task on hold temporarily.

Moving forward, I aim to focus on loading the error circuit on the modal, implementing delete and undo functionality to remove the erroneous component within the modal, and closing the modal once the circuit is back to its normal state. I plan to discuss this with my mentors and aim to complete it within the upcoming two weeks.

Identifying and Modifying Currently Selected Components:

After that, I started working on the following task:
There should be a way to identify the currently selected component on the canvas and modify that component's object in the globalScope.

For achieving this, I created two functions:

getCurrentlySelectedComponent(): This function is responsible for returning the currently selected component on the canvas.
modifyCurrentlySelectedComponent(property, value): This function takes two parameters. The first parameter is the property of the currently selected component that needs to be modified, and the second parameter is the new value that will replace the existing value of the specified property. This function effectively modifies the specified property of the currently selected component within the globalScope.

Currently, identifying a specific component in a circuit and modifying its property in globalScope is challenging. However, with the implementation of these functions, we can now easily find and modify the currently selected component.
Let me provide you with an example to illustrate how this functionality can be utilized. Consider a circuit, and now select any component whose properties you want to modify. Suppose we want to modify the bitWidth property of a particular node from 1 to 10. We can do this by running the following command in the console.

globalScope.getCurrentlySelectedComponent();
globalScope.modifyCurrentlySelectedComponent('bitWidth', 10);

Find and fix Data Integrity Issues:

Next, I took on the challenge of resolving data integrity issues that were causing data corruption for many users. These issues were crucial to address for a smoother user experience.

Under this task, I worked on Issue #103

In this, The previous implementation of simulation queue uses a linear implementation for managing the priority queue, which involves sorting the elements in an array to maintain the priority order. As a result, the add method uses linear time complexity (O(n)) to find the correct position for adding an element based on its timestamp.

To make the performance better, I have worked on decreasing it's complexity to O(log n), I am making use of a binary heap data structure to manage the priority queue. A binary heap is a specialized tree-based data structure that maintains the heap property, where the parent node has a higher priority (smaller timestamp) than its child nodes. In this implementation, the add method uses heapify-up to find the correct position for adding an element, and the remove method uses heapify-down to maintain the heap property after removing an element. These heapify operations have logarithmic time complexity (O(log n)), which makes the binary heap implementation much more efficient for managing a priority queue compared to the linear implementation.
It will be leading to better performance for larger event queues due to the more efficient O(log n) time complexity for insertion and removal operations.

Pull Requests:

What's Next?

As I look ahead to the next two weeks:

I will continue to focus on addressing data integrity issues and aim to resolve the remaining issues.
Completing Pull Request #3781 is another priority, and I will ensure the proposed changes are thoroughly reviewed and integrated.
Next, I will start working on the task of identifying areas in the codebase where we can implement more defensive coding practices, reducing dependencies on data always being in the correct format.

The journey through Weeks 7 and 8 of GSoC'2023 has been both challenging and rewarding.

Stay tuned for more updates and progress in the coming weeks!

Coding Period GSoC'23 | Week 3 + 4 + 5

Prerna Sharma — Thu, 06 Jul 2023 09:38:12 +0000

Welcome back to another progress update on my Google Summer of Code (GSoC) 2023 journey! If you haven't already, make sure to catch up on my previous blog posts covering Week 1 and Week 2. In this blog, I'll be sharing my accomplishments and developments from Weeks 3, 4, and 5.

Work Done (12th June - 5th July):

As mentioned in my previous blog, I had almost completed the state machine task and the simulator crash recovery task. However, during third and half of the fourth weeks, I had scheduled university exams that required my attention, so I couldn't work on the project during that time. I had informed my mentors about this in advance. Once my exams concluded, I resumed working on my project. During the last meeting with my mentors just before my exams, we discussed making some changes to the simulator crash recovery task. Also, I identified an issue with the state machine task.

So, I started my work back by addressing these changes and issues and completed the necessary pull requests for both tasks. Here are the changes we decided upon:

Simulator Crash Recovery Task: Initially, I was calling the autosave function alongside the scheduleBackup() function. However, after discussions, we agreed to schedule autosave at specific time intervals. So, I modified the code accordingly. Now, we check for any increments in the backups every three seconds. If an increment is detected in the length of backups, the autosave function is triggered, otherwise, it is skipped.
State Machine Task: There was an issue where the state would change from normal to an error in real-time, but to revert from error to normal, we had to click on the simulation area, which was not an optimal user experience. I addressed this issue and now, the state revert from error to normal in real time. Additionally, some suggested changes by mentor were made and pushed.

After completing these tasks, I started working on a new task, which involved creating a better system for handling high impedence values. In CircuitVerse, we have two elements related to high impedence conditions: tristate and controlled inverter. The controlled inverter was broken initially, so first, I fixed it. Following that, I identified and resolved several issues related to the tristate element, which involved fixing shortcomings and ensuring proper functionality. I verified the changes using Logisim, and now both the tristate and controlled inverter are functioning correctly.

Next, I began working on another task, which involved exposing helpful functions for debugging circuits. I created four functions for this purpose:

load(): This function takes circuit data as a parameter and draws the circuit on the canvas.
removeBugNodes(): This function removes nodes with bugs from the circuit.
Next(): This function takes the circuit to the next state.
Previous(): This function takes the circuit to the previous state. These functions will greatly aid in debugging circuits. I plan to discuss the implementation and explore other helpful functions which we can implement during my upcoming meeting.

Pull Requests:

So, What's Next?

As per my proposal timeline, I aim to complete the remaining two tasks before the mid-term evaluation. I am determined to put in my utmost effort to accomplish these tasks and ensure their completion before the mid-term evaluation.
In the upcoming week, my primary focus will be on completing the following tasks:

'Simulation Stack Exceeded' Error: I plan to develop a solution that allows the identification of components that are being added to the simulation stack an unusually large number of times, leading to the error. By addressing this issue, we can enhance the stability and efficiency of the simulator.
Identifying and Modifying Selected Components: Another task on my agenda is to implement a feature that enables the identification of the currently selected component on the canvas. This functionality will empower users to modify the properties of the selected component conveniently within the global scope.

That concludes my progress update for Weeks 3, 4, and 5 of my GSoC23 project. I will continue to share regular updates on my journey, so stay tuned for more.

Coding Period GSoC'23 | Week 1 + 2

Prerna Sharma — Sat, 10 Jun 2023 14:18:35 +0000

The Google Summer of Code 2023 Coding Period kicked off on May 29th, following a community bonding period of approximately three weeks. As I have completed the second week I am happy to share my accomplishments and future plans with you all.

Checkout my previous blog about My Journey to GSoC'23

Community Bonding Period (May 4th - May 28th)

During the community bonding period, we had two meetings. The first meeting involved all the contributors and mentors, where we introduced ourselves and had a discussion on how we work in the GSoC program. The second meeting was specifically with my project mentors, where we discussed the project's timeline and the tasks of the project. Also, I must admit, I was quite nervous during the second meeting and ended up rambling a bit! ;-)

Work done (29th May - 11th June)

I initially started with the task of "implementing a safe recovery from simulator crashes". However, After having a discussion, we decided to complete the task of "implementing a state machine for the simulator to handle uncaught exception errors" before working on the simulator crash recovery task. So, I put the crash recovery task on hold and began implementing the state machine.

In state machine task, I created two states for the simulator that are "normal" and "error". When there are no errors in the circuit, the simulator remains in the normal state. However, as soon as an uncaught exception error occurs, the state transitions from normal to error. In the error state, the user can only delete or undo components in the circuit. So, Once the user removes the erroneous component, the simulator returns to the normal state and resumes its proper functioning.

After completing the state machine implementation, I resumed working on the recovery from simulator crash task. Previously, when a simulator crashed, all the circuit data would be lost. To address this, I developed an autosave feature where the circuit's data is saved in the local storage every time we click on the simulator. This allows us to restore the circuit to a previous state after a simulator crash.

Pull Requests:

So, what's next?

I will be working on the task of "Making a better system for high-impedance values handling" and then moving on to "expose helpful functions while debugging the circuit." My aim is to complete these tasks by the end of the fourth week.

As I wrap up the initial weeks of coding, I'm filled with enthusiasm to continue learning alongside CircuitVerse. The journey ahead is filled with excitement, and I can't wait to see what lies ahead!🚀

My Journey to GSoC'2023

Prerna Sharma — Mon, 08 May 2023 15:32:08 +0000

About GSoC

Google Summer of Code is an incredible opportunity for students around the world to work on open-source software projects, receive a stipend for their contributions, and gain valuable experience under the guidance of experienced mentors.

My journey from rejection to acceptance

Open source is a vast and exciting world, and I knew I wanted to be a part of it. In September'21, while I was exploring open source, I got to know about CircuitVerse, a circuit simulation platform that I had used for my COA practical labs, which was also an open-source project. I was excited to contribute to a platform that was already being used by me and my classmates(Secret🤫:-I was excited to flex in my class XD) and then I started fixing bugs and adding features to the CircuitVerse organization. Over the next few months, I continued my contributions and learning with the organization. A few months later, I heard about the Google Summer of Code program. I was lucky that CircuitVerse was part of the program, so I planned to participate as a student developer in GSoC'22 with CircuitVerse. The projects were announced around mid-February 2022, but at that same time, my end-semester exams were going on. So, I started researching the projects by the end of March 2022, and the last date to submit the proposal was 20th April. I had hardly 10-15 days to research, complete the pre-tasks, and propose.

Despite the time crunch, I put my best efforts into making a good proposal. However it got rejected, and that was a disappointing moment for me. I remember, I cried for an hour and also deactivated my Slack community account immediately. I even thought of never going back to it again. But, my mentor helped me understand that rejection is part of the journey. His kind words gave me the motivation to continue contributing to open-source, improve my technical skills, and strengthen my understanding of the codebase.

Then, I started contributing again to the same organization and decided to try again for GSoC'23, and this time I was determined to succeed. I worked on my technical skills more, and this time thankfully, my exams were not between that time. I researched the project to the best of my ability and made my proposal. Finally, my efforts paid off, my proposal was accepted, and I was selected to participate in GSoC 2023.

My journey to Google Summer of Code 2023 was a challenging journey .It taught me that rejection is not the end, and we can always try again with a better approach. I am grateful for this experience, and I look forward to contributing more to the open-source community.

To all the aspiring GSoC participants out there, my final note is to never give up. Failure is not the end but the beginning of a new learning journey. Start early, communicate with your mentors and the community, and always be open to feedback. Focus on making quality contributions, and don't be afraid to ask for help when you need it. With dedication and hard work, you can achieve your dreams of participating in GSoC and contributing to open-source.

"Believe in yourself and all that you are. Know that there is something inside you that is greater than any obstacle." - Christian D. Larson

Follow for more..

CSS Shorthand Properties

Prerna Sharma — Sun, 12 Feb 2023 12:09:12 +0000

Here are some CSS Shorthand Properties which are helpful for every developer:-

Transition

Transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately.

Longhand

 transition-property: font-size;
 transition-duration: 2s;
 transition-timing-function: ease-in-out;
 transition-delay: 1s;

Shorthand

 transition: font-size 2s ease-in-out 1s

Text-Decoration

The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text.

Longhand

text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: dotted;
text-decoration-thickness: 0.2rem ;

Shorthand

 text-decoration: underline red dotted 0.2rem;

Flex

The flex property is a sub-property of the Flexible Box Layout module(CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension).

Longhand

flex-grow: 3;
flex-shrink: 4;
flex-basis: 10%;

Shorthand

 flex: 3 4 10%

Gap

The gap property in CSS is for row-gap and column-gap, specifying the size of gutters, which is the space between rows and columns within grid, flex, and multi-column layouts.

Longhand

row-gap: 10%;
column-gap: 5%;

Shorthand

gap: 10% 5%;

Font

The font property in CSS allows us to change the styling of texts.

Longhand

font-style: small-caps;
font-weight: bold;
font-size: 10px;
line-height: 2.3;
font-family: cursive;

Shorthand

font: small-caps bold 10px/2.3 cursive;

Background

The Background CSS property allows us to sets background style properties, such as color, image, origin and size, or repeat method.

Longhand

background-color: yellow;
background-image: url('https://....');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right top;

Shorthand

background: yellow url('https://....') no-repeat right top;

Border

The border property in CSS is used to drawing a line around the element it is applied to.

Longhand

border-width: 2px;
border-style: dotted;
border-color: green;

Shorthand

border: 2px dotted green;

Margin and Padding

Margin:-
The margin property defines the outermost portion of the box model, creating space around an element, outside of any defined borders
Padding:-
The padding property in CSS defines the innermost portion of the box model, creating space around an element’s content, inside of any defined margins and/or borders.

Longhand

margin-top: 2px;
margin-right: 3px;
margin-bottom: 4px;
margin-left: 5px;
padding-top:  2px;
padding-right: 3px;
padding-bottom: 4px;
padding-left: 5px;

Shorthand

margin : 2px 3px 4px 5px;
padding : 2px 3px 4px 5px;

Outline

The outline property in CSS draws a line around the outside of an element. It’s similar to border except that:

It always goes around all the sides, you can’t specify particular sides.
It’s not a part of the box model, so it won’t affect the position of the element or adjacent elements (nice for debugging!).

Longhand

outline-width: 2px;
outline-style: solid;
outline-color: black;

Shorthand

outline: 2px solid black;

Animation

The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property.

Longhand

 animation-name: round;
 animation-duration: 3s;
 animation-timing-function: ease-in;
 animation-delay: 0.5s;
 animation-iteration-count: reverse;
 animation-direction: both;
 animation-fill-mode: running;
 animation-play-state: slideout;

Shorthand

animation: round 3s ease-in 0.5s infinite reverse both running slideout;

Happy learning...
Follow for more..🎉🎉

JavaScript Higher Order Methods

Prerna Sharma — Fri, 03 Feb 2023 18:39:11 +0000

METHODS :-

forEach()
filter()
sort()
map()
reduce()

Consider an example:-

const product = [
  {id: 1,category: "IPhone",name: "Iphone11Pro", start:2007, price:100000},
  {id: 2,category: "MI",name: "Note8", start:2008, price:90000},
  {id: 3,category: "Samsung",name: "GalaxyS45", start:2009, price:80000},
  {id: 4,category: "OnePlus",name: "Nokia24", start:2010, price:50000},
  {id: 5,category: "Nokia",name: "Iphone11Pro", start:2011, price:60000},
  {id: 6,category: "Iphone",name: "Iphone14pro", start:2012, price:120000}
]

1. FOREACH

Foreach loop (or for each loop) is a control flow statement for traversing items in a collection.


//for loop
for(let i=0;i<product.length;i++){
   console.log("[Product]", product[i]);
}

//forEach loop
product.forEach((input) => {
   console.log("[Product]",input);
})

Output:-

[Product] {id: 1, category: 'IPhone', name: 'Iphone11Pro', start: 2007, price: 100000}
VM70:2 [Product] {id: 2, category: 'MI', name: 'Note8', start: 2008, price: 90000}
VM70:2 [Product] {id: 3, category: 'Samsung', name: 'GalaxyS45', start: 2009, price: 80000}
VM70:2 [Product] {id: 4, category: 'OnePlus', name: 'Nokia24', start: 2010, price: 50000}
VM70:2 [Product] {id: 5, category: 'Nokia', name: 'Iphone11Pro', start: 2011, price: 60000}
VM70:2 [Product] {id: 6, category: 'Iphone', name: 'Iphone14pro', start: 2012, price: 120000}

2. FILTER

The filter() method creates a new array with all the elements that pass the test implemented by the callback() function.

//for loop
let filter_product = [];
for(let i=0;i<product.length;i++){
  if(product[i].category === 'MI'){
     filter_product.push(product[i]);
  }
}
console.log(filter_product);

//filter
let filter_product = product.filter(
  input => input.category === 'MI'
);
console.log(filter_product);

Output:-

0:{id: 2, category: 'MI', name: 'Note8', start: 2008, price: 90000}
length:1
[[Prototype]]: Array(0)

3. MAP

The map() method creates a new array with the results of calling a function for every array elements.
The map() method calls the provided function once for each element in an array.

//map
//Create array of product name
const product_name = product.map((input) => input.name);
console.log(product_name);

Output:-

(6) ['Iphone11Pro', 'Note8', 'GalaxyS45', 'Nokia24', 'Iphone11Pro', 'Iphone14pro']

4.SORT

The sort() method is used to sorts the items of an array. It takes two arguments to compare and sort it accordingly.

//sort
const sort_product = product.sort((input1,input2) => (
  input1.price > input2.price ? 1 : -1)
);
console.log(sortProduct);

Output:-

0: {id: 4, category: 'OnePlus', name: 'Nokia24', start: 2010, price: 50000}
1:{id: 5, category: 'Nokia', name: 'Iphone11Pro', start: 2011, price: 60000}
2:{id: 3, category: 'Samsung', name: 'GalaxyS45', start: 2009, price: 80000}
3:{id: 2, category: 'MI', name: 'Note8', start: 2008, price: 90000}
4:{id: 1, category: 'IPhone', name: 'Iphone11Pro', start: 2007, price: 100000}
5:{id: 6, category: 'Iphone', name: 'Iphone14pro', start: 2012, price: 120000}
length: 6
[[Prototype]]: Array(0)

5. REDUCE

The reduce() method iterates through an array and returns a single value.

const product_ids = [1, 2, 3, 4];
const reduce_product_ids = product_ids.reduce((previous, current) => {  
  return previous + current;
});
console.log(reduce_product_ids);

Output:-

10

Follow for more.

JAVASCRIPT : AJAX AND FETCH

Prerna Sharma — Sun, 29 Jan 2023 17:57:44 +0000

INTRODUCTION:-

AJAX

AJAX is a technique for sending or requesting data without have to perform a page load. If you have ever used a single-page application like Gmail and Google Maps, this is how you are able to go through your inbox and navigate through the map without changing the page you are on. AJAX stands for Asynchronous JavaScript and XML. Asynchronous code is code that runs in parallel with something else, so in this case, you can request or send data without affecting your browsing experiences.

XML

XML, standing for Extensible Markup Language, is similar to HTML but is used for data transfer, just like JSON. The only problem is that XML is typically heavily, harder to read and doesn't integrate as gracefully as JSON does with JavaScript.

<dog>
  <name>Rishi</name>
  <age>10</age>
  <weight>30</weight>
</dog>

Because of XML's downsides, AJAX originally created to be used in conjunction with XML, is now more popularly used with JSON instead.

MAKING AJAX CALLS WITH FETCH

Instead of making AJAX calls using the original method, via and XMLhttpRequest, we will be using the modern fetch instead.

We will be using JSONplaceholder as the source of the information, and get their posts. If you were to click here, you will see the data that we are going to try and fetch.

With this data, you can do then do whatever it is that you had like with it. You can add it to the page, perform calculations on it, or pretty much anything.

// base url
let base = '<u>https://jsonplaceholder.typicode.com</u>';

//use fetch on the /posts route, then pass the response along
fetch(base + "/posts").then(function(response){
      // with the response, convert it to JSON, then pass it along
      response.json().then(function(response){
           //print that JSON
           console.log(json);
     });
});

Transferring JSON via AJAX from a server is not the only way you can provide your website with the data it needs to function. You can take advantage of client-sided methods of storing information, like cookies.

Follow for more.

CSS-Flexbox

Prerna Sharma — Tue, 30 Aug 2022 13:05:10 +0000

What is Flexbox?

Flexible Box Layout (Flexbox) is a CSS3 web layout model. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size.Flexbox consists of Flexbox Container and Flex items

Flex-Container

The outer box, which contains flex-items, is created using display: flex;

.flexbox {
display: flex
}

This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.

Flex-Items

Direct children of the flex container

Flex-Direction

Column

.flexbox {
 flex-direction: column;
}

Row

.flexbox {
 flex-direction: row;
}

Column-reverse

.flexbox {
 flex-direction: column-reverse;
}

Row-reverse

.flexbox {
 flex-direction: row-reverse;
}

Justify-Content

Space-between

.flexbox {
 justify-content: space-between;
}

Space-Evenly

.flexbox {
 justify-content: space-evenly;
}

Space-around

.flexbox {
 justify-content: space-around;
}

Align Items

Center

.flexbox {
 align-items: center;
}

Flex-start

.flexbox {
 align-items: flex-start;
}

Flex-end

.flexbox {
 align-items: flex-end;
}

Flex-Wrap Properties

Nowrap

.flexbox {
  flex-wrap: nowrap;
}

Wrap

.flexbox {
 flex-wrap: wrap;
}

Wrap-reverse

.flexbox {
  flex-wrap: wrap-reverse;
}